...
alt text http://shup.com/Shup/329122/1104381445-My-Desktop.png
I checked here http://www.css3.info/preview/rounded-border/ but all corners are in rounded shape.
Jquery Corner Plugin
Corner is a simple plugin for creating rounded (or other styled)
corners on elements.
Yes, only round/elliptical borders are available through CSS. If you want other shapes you will have to use an image.
It's possible to get straight diagonals by abusing border joins:
<div style="background: gray; height: 100px; width: 200px; position: relative;">
<div style="height: 1px; width: 1px; border-top: solid gray 20px; border-right: solid white 20px; position: absolute; bottom: -1px; right: 0;"></div>
</div>
Not sure that's an especially good idea though.
Improving on bobince's idea, which uses two elements, have you tried using backgrounds? They allow you to stick a normal coloured background plus the moving custom background stuck to the bottom:
element {
background: gray url(cornerImage) no-repeat bottom right;
}
This is superior to a jQuery plugin as no scripting is needed (which should be avoided for presentation as much as possible). The corner image will just be a small square image that has grey and white triangles.
Related
This question already has answers here:
Border with a transparent centred arrow
(3 answers)
Closed 7 years ago.
I am trying to generate a straight horizontal line with a breakdown in the middle to display an arrow. The idea is that the content displayed under the line will provide details about the content displayed above the line. Here is what the line should look like:
I am trying to generate this with pure HTML and CSS (no bitmap images). Use of Font Awesome is acceptable if it ends up producing the right result. I need control over the line's thickness and color. The angle of the breakdown does not matter (45 and 90 degrees on the sample shown above). I am aware of this CSS triangle trick, but I can't think of a way to apply it to this scenario.
This nice effect can be achieved using the CSS :before and :after properties. It's best to play around with Simon Højberg's online generator at cssarrowplease.
A solution with a transparent arrow background, allowing you to use it with every background:
HTML:
<div class="line-separator">
<div class="side-line"> </div>
<div class="triangle"> </div>
<div class="side-line"> </div>
</div>
CSS:
.side-line {
display: inline-block;
border-top: 1px solid black;
width: 20%;
}
.triangle {
display: inline-block;
height: 7px;
width: 7px;
transform: rotate(45deg);
transform-origin: center center;
border-top: 1px solid black;
border-left: 1px solid black;
margin: 0 -3px -3px;
}
Live demo:
http://jsfiddle.net/85saaphw/
I'm using -webkit-mask-box-image with a png file on a coloured background to achieve a shape in whatever colour I want without having to have a file in each colour.
background-color: blue;
-webkit-mask-box-image: url("http://i.imgur.com/9Xo9L4Z.png");
I'll be using more complex shapes, the hexagon in the jsfiddle is only an example:
http://jsfiddle.net/TtR3b/
Is there any easy way I could add an outline to the resulting shape? I'm hoping there is some property or method to allow this or maybe there some way to manipulate the mask image to allow an outline?
I tried this but anything added simply formed part of the mask, even if the outline is in a different colour. My only other option is overlaying an extra image that contains just the outline I want but that seems wasteful if there's a better approach.
So I was able to do it using a second image behind the first, slightly larger.
#mask {
position: absolute;
width: 98%;
height: 98%;
top: 1%;
left: 1%;
background-color: blue;
-webkit-mask-box-image: url("http://i.imgur.com/9Xo9L4Z.png");
}
#maskborder {
position: absolute;
width: 50%;
height: 50%;
background-color: red;
-webkit-mask-box-image: url("http://i.imgur.com/9Xo9L4Z.png");
}
<div id="maskborder">
<div id="mask"></div>
</div>
edit: http://jsfiddle.net/TtR3b/2/
I'm very very new to bootstrap and front-end frameworks in general. But, I am able to notice the characteristics that sites that use bootstrap have in common. The following picture contains something that I find to be very ubiquitous amongst bootstrap sites. The downward (or any direction) blue arrow that's pointing the the text below it is what I'm referring too.
I used firebug to inspect the elements and found it to be something that was relevant to the .hero-unit div.
How exactly does this work and how is it accomplished?
It doesn't come standard with bootstrap but Here is a good article on how to do with :after which I believe is what you are looking for.
Demo
.hero:after {
z-index: -1;
position: absolute;
top: 100%;
left: 50%;
margin-left: -10px;
content:'';
width: 0;
height: 0;
border-top: solid 10px #e15915;
border-left: solid 10px transparent;
border-right: solid 10px transparent;
}
You make the triangle larger and smaller by adjusting the border-* attributes, and also the margin-left(border * -1).
Here is what you found in firebug. Hero Unit does refer to a jumbotron-style header, a large header element that can be used in bootstrap. You can find this element here:
http://getbootstrap.com/2.3.2/components.html#typography
Still the arrow you are referring to seems to be something that has been designed by the developer and does not come with the bootstrap unit.
suppose we have a visible area 300 x 200 pixels
suppose we have an image of any size. It can be bigger or smaller than the visible area.
Question:
1.center the image vertically and horizontally inside the visible area. Crop overflowing parts of the image
1a. vertical centering is unimportant and can be omitted
2.draw the border around the visible part of the image. Note that the border can match either the outer div border or image border
2a.clarification: I want to find the way of (for example) creating the third div whose borders would repeat the borders of the visual part of the image
Cropped or not, in browser has to be seen the border around the visible part of the image
mercator has already done some of the job here as described below:
You can make it work if you wrap
another element around the image:
<div class="outer">
<div class="inner"><img src="" alt="" /></div>
</div>
And the following CSS:
.outer {
width: 300px;
height: 200px;
border: 1px solid red;
overflow: hidden;
*position: relative;
}
.inner {
float: left;
position: relative;
left: 50%;
}
img {
display: block;
position: relative;
left: -50%;
}
The position: relative on the
'outer is marked with * so it will
only work in IE6/7. You could move it
to a conditional IE stylesheet if
that's what you prefer, or remove the
* altogether. It's needed to avoid
the now relatively positioned children
from overflowing.
I'm not to sure what you mean by your 2d clarification, but I think you can achieve this with the follow markup:
<div class="outer"></div>
and css:
.outer {
width: 300px;
height: 200px;
border: 1px solid red;
background: #fff url(/path/to/image.jpg) 50% 50% no-repeat;
}
This will create a div of 300x200px with a 1px red border. It will then position an image in the div centered vertically and horizontally, or default to white the image cannot be found.
The border, you'll need to draw in another fashion. Simple borders can be added using css. More complex borders and shadows are limited in css and only implemented in some browsers, but you can use javascript to help you add a more complex shadow. There are many snippets and jQuery plugins that can help you.
You can center the image in the visible area by giving it margin-left = margin-right = auto.
I have created essentially a large arrow pointing right.
<div style="
font-size: 0px; line-height: 0%; width: 100px;
border-bottom: 80px solid #8cb622;
border-right: 62px solid #dadbdf;
"></div>
<div style="
font-size: 0px; line-height: 0%; width: 100px;
border-top: 80px solid #8cb622;
border-right: 62px solid #dadbdf;
"></div>
Now I know this isn't "proper" but I am just testing right now.
I am wondering if there is a way that I can use this border technique and still somehow place a drop shadow on the leading bottom edge of the arrow. I was thinking of placing another div underneath it, but for this technique to work the other borders need to be visible.
If this can't be done using the border technique am I forced to use an image as the front of this arrow.
Thanks
You might want to consider using a Canvas to do this, which works cross platform very well with ExplorerCanvas included for MSIE compatibility (and of course is supported natively in WebKit & Gecko).
I believe it is box-shadow but that is likely to assume it works on the box model and probably won't compute the geometry created by the borders.