I want to create a trapezoid with all corners rounded. I've gotten 2/4 of the way there but can't manage to get the bottom corners look nice. Here is what I have so far: http://jsfiddle.net/w8rHk/2/
Color difference is for illustration only. It will be the same color in the end.
Question: How do I finish this and create a trapezoid with all nicely rounded edged?
1 million points if you can make it scale up and down for screen sizes with out it breaking. That's a ninja level I don't come close to approaching yet.
Question 2: Any way to put a gradient on this bad boy?
Thanks for the help!
Code:
.trapezoid{
vertical-align: middle;
position:relative;
border-bottom: 120px solid blue;
border-left: 200px solid transparent;
border-top-left-radius:30px;
border-top-right-radius:30px;
*border-bottom-right-radius:3px;
height: 0;
width: 150px;}
.trapezoid:after {
content:' ';
left:-14px;
top:-10px;
position:absolute;
background:red;
border-radius:40px 30px 0 0;
width:164px;
height:40px;
display:block;
}
Here's my attempt lol
.trapezoid{
position:relative;
border-bottom: 100px solid blue;
border-right: 12px solid transparent;
border-left: 180px solid transparent;
width: 122px;
}
.trapezoid:before{
content:' ';
left:-184px;
top:98px;
position:absolute;
background:blue;
border-radius:80px 20px 80px 80px;
width:318px;
height:20px;
}
.trapezoid:after {
content:' ';
left:-11px;
top:-7px;
position:absolute;
background:blue;
border-radius:150px 50px 90px 0px;
width:133px;
height:30px;
}
<div style="margin:30px">
<div class="trapezoid">
</div>
</div>
http://jsfiddle.net/Bzj3h/
Related
Is it possible to achieve this slanted sidebar layout with CSS? The right side would be the main content where I assume the slanted sidebar layout could overlap the extra. Thanks for reading!
Try something like this..
#shape {
border-top: 100px solid green;
border-right: 20px solid transparent;
height: 0;
width: 100px;
}
Fiddle: http://jsfiddle.net/3wLJj/1/
more info: http://css-tricks.com/examples/ShapesOfCSS/
If you are going to add some text, or elements inside the green div, it is better to do it this way than creating only a shape.
Fiddle
.main{
width:60%;
background:green;
height:400px;
position:relative;
color:white;
}
.main:after{
content:'';
position:absolute;
right:-40px;
border-top: 400px solid green;
border-right: 40px solid transparent;
}
.side{
margin-left:10%;
width:30%;
}
Is it possible to recreate a box like this without using background images and only one element?
Ideally, I'd be able to control which corners are darkened by adding a class, so the above image might be class="box dark-top dark-left dark-bottom dark-right". I can darken two by using :before and :after, but am having problems thinking of a good way to darken three or four corners without adding additional markup.
Here's a way to darken all four corners with one element, though I haven't figured out how to darken specific corners yet. But my theory was to have the original border as the dark border, and then /lighten/ the sides of the box with pseudo-elements.
Fiddle: http://jsfiddle.net/KZSLH/
.box {width:236px; height:236px; border:1px solid #333; position:relative;}
.box:before {content:""; display:block; width:200px; height:236px; position:absolute; top:-1px; left:18px; border-top:1px solid #ccc; border-bottom:1px solid #ccc;}
.box:after {content:""; display:block; width:236px; height:200px; position:absolute; top:18px; left:-1px; border-left:1px solid #ccc; border-right:1px solid #ccc;}
It's far from perfect, but this is the only way I could think of to do something like that... You'll want to play around with the border thickness, border radius and which borders are rounded to really have it suit your needs
The only thing I couldn't figure out is how to get the edges of the corners to be sharp rather than tapering off... Maybe someone could contribute that part?
First, start off with two overlapping div elements:
<div id="thick" />
<div id="thin" />
Then, use rounded corners and relative positioning to taper off and create the "bold" corners.
#thick {
position:absolute;
top:50px;
left:50px;
height:100px;
width:100px;
background-color:white;
border:3px solid black;
}
#thin {
position:relative;
top:-2px;
left:-2px;
height:104px;
width:104px;
background-color:white;
border-radius: 15px;
}
Here is a fiddle: http://jsfiddle.net/bGrdA/
And credit to this post for giving me the idea.
I think I figured it out. The key is that there must be content inside of the box in it's own element, which will always be the case my scenario.
Example: http://jsfiddle.net/n7pgP/
The classes that can be added to the box are:
dtl = darken top left
dtr = darken top right
dbl = darken bottom left
dbr = darken bottom right
Some thing this can be tried out for two elements
http://jsfiddle.net/V8jmR/
#content {position:relative;width:400px;height:300px;}
#content:before, #content:after, #content>:first-child:before, #content>:first-child:after {
position:absolute;
width:80px; height: 80px;
border-color:red; /* or whatever colour */
border-style:solid; /* or whatever style */
content: ' ';
}
#content:before {top:0;left:0;border-width: 1px 0 0 1px}
#content:after {top:0;right:0;border-width: 1px 1px 0 0}
#content>:first-child:before {bottom:0;right:0;border-width: 0 1px 1px 0}
#content>:first-child:after {bottom:0;left:0;border-width: 0 0 1px 1px}
Original answer
CSS - show only corner border
The only possibility I know is in using additional elements:
<div class="box">
<span class="darkTopLeft"></span>
<span class="darkTopRight"></span>
<span class="darkBottomLeft"></span>
<span class="darkBottomRight"></span>
</div>
.box {
background-color: #fff;
border: 1px solid #ccc;
height: 100px;
position: relative;
width: 100px;
}
.box > span {
height: 10px;
position: absolute;
width: 10px;
}
.darkTopLeft {
border-left: 1px solid #000;
border-top: 1px solid #000;
left: -1px;
top: -1px;
}
.darkTopRight {
border-right: 1px solid #000;
border-top: 1px solid #000;
right: -1px;
top: -1px;
}
.darkBottomLeft {
bottom: -1px;
border-bottom: 1px solid #000;
border-left: 1px solid #000;
left: -1px;
}
.darkBottomRight {
bottom: -1px;
border-bottom: 1px solid #000;
border-right: 1px solid #000;
right: -1px;
}
http://jsfiddle.net/cM7xU/
If I use box-sizing: "border-box" for images the images will get smaller, like on hover: Example JsFiddle
Is it possible to do the same effect without the image getting cropped?
Solution #1 Outline property. Try to use outline instead of border with negative outline-offset value equal to outline width:
img:hover {
box-sizing:border-box;
outline: solid 10px #f80;
outline-offset: -10px;
}
http://jsfiddle.net/dfsq/BPRyZ/2/
Also since IE does not understand this property you can leave box-sizing to be used by IE8+.
Solution #2 Using div as wrapper + :after:
<div class="img-wrap">
<img src="http://upload.wikimedia.org/wikipedia/commons/a/af/Bonsai_IMG_6426.jpg" class="img1" />
</div>
CSS:
.img-wrap:after {
border: 0;
}
.img-wrap:hover:after {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
border: solid 10px #f80;
}
http://jsfiddle.net/dfsq/BPRyZ/7/
The question you need to answer is, do you want the image itself to be 200px, or the entire box to be 200px. There are 4 different ways to code this depending on your answer to the previous question...
If you want the entire box to be 200px wide, then you can use border-box with the following code...
http://jsfiddle.net/BPRyZ/8/
img {
width:200px;
border: transparent 10px solid;
box-sizing:border-box;
}
img:hover{
box-sizing:border-box;
border:solid 10px #f80;
}
If you want the entire box to be 200px wide, then you could also use this code...
img {
width:180px;
border: transparent 10px solid;
}
img:hover{
border:solid 10px #f80;
}
If you want the image itself to be 200px, then you need this code... (this means your total box width is actually 220px)
img {
width:220px;
border: transparent 10px solid;
box-sizing:border-box;
}
img:hover{
box-sizing:border-box;
border:solid 10px #f80;
}
For the above you could also use...
img {
width:200px;
border: transparent 10px solid;
}
img:hover{
border:solid 10px #f80;
}
I updated your jsfiddle
CSS:
img {
width:200px;
border: transparent 10px solid;
}
img:hover{
box-sizing:border-box;
border:solid 10px #f80;
width:220px;
}
Here is an example. http://jsfiddle.net/52c7t/
Simply: I'm trying to get the div on the right side, to have a border like the div on the left. (I'd want the border to be on the left side of the right div)
I tried a million different combinations and haven't been able to do it. I was trying to avoid making an image and do this with css.
Thanks for your help!
UPDATE:
Image of what I mean. Sorry about my graphic design skills :P
http://i.imgur.com/pGSnL.png
HTML
<div id = "top_bar">
<div id="top_left_button" >border</div>
<div class = "trapezoid"> none </div>
</div>
CSS
.trapezoid{
vertical-align: middle;
position:absolute;
border-bottom: 60px solid blue;
border-left: 45px solid transparent;
border-top-left-radius:30px;
*border-top-right-radius:15px;
*border-bottom-right-radius:3px;
height: 0;
width: 50px;
display: inline-block;
right:1px;
}
#top_bar{
background-color: #000;
border-bottom: 1px solid #666;
color: #222;
position:fixed;
left:0px;
top: 0px;
width:100%;
overflow:hidden;
height: 50%;
font-weight: normal;
white-space: nowrap;
color: white;
z-index:20;
line-height: 45px;
min-width:320px;
max-width: 320px;
max-height:48px;
border-radius: 5px;
text-shadow: rgba(0,0,0,0.6) 0px -1px 0px;
}
#top_bar:after {
content: '';
width: 10%;
display: inline-block;
font-size: 0;
line-height: 0
}
#top_title, #top_left_button, #notifications, #top_right_button {
color: white;
height: 100%;
overflow:hidden;
display: inline-block;
text-align: center;
vertical-align: middle;
}
#top_left_button,#top_right_button{
width: 20%;
background: rgba( 100, 255, 255, .1 );
}
#top_left_button{
border-right: 2px solid #666;
}
EDIT: UPDATED LINK
The simple solution is to create another div since your blue div is already made up using the border property.
That new div is essentially a clone of the blue div, but will be colored red and made a little larger using the CSS width property. This becomes a pseudo border for the blue div.
Example of new div:
.trapezoid-border{
vertical-align: middle;
position:absolute;
border-bottom: 60px solid red; /* Color Changed will be pseudo-border color */
border-left: 45px solid transparent;
border-top-left-radius:30px;
*border-top-right-radius:15px;
*border-bottom-right-radius:3px;
height: 0;
width: 53px; /* Extra 3 pix when compared to .trapezoid class width */
display: inline-block;
right:1px;
}
jsFiddle DEMO
Frankly, I think you should be using an image for this, but if you really want or have to avoid that, a somewhat dirty (though I think very convincing looking) fix would be to create a fixed sized red <div>, that you position and rotate (using the transform property) just right to achieve the appropriate effect.
.redborder {
background-color:red;
width:3px;
height:70px;
transform:rotate(37deg);
-ms-transform:rotate(37deg);
-moz-transform:rotate(37deg);
-webkit-transform:rotate(37deg);
-o-transform:rotate(37deg);
position:absolute;
right:70px;
top:-10px;
}
On jsfiddle: http://jsfiddle.net/QBTpV/18/
(tested in Chrome and IE)
I have tried to create a triangle with CSS and it looks good, however I have now got a problem implementing it after a box.
Check out my example and you will see what I mean:
https://jsfiddle.net/TTVuS/
It seems like the triangle after .box gets "cut off" and I have absolutely no idea why this happens.
I want it to look like .arrow.
I have tried to change dimensions of the box, the triangle etc. but nothing worked.
p.s. here is the css in case Jsfiddle is slow or not available again:
.box{
background:red;
height:40px;
width:100px;
}
/*the triangle but its being cut off*/
.box:after{
content:"";
width:0;
height:0;
border-top:20px solid transparent;
border-bottom:20px solid transparent;
border-left:20px solid green;
}
/*the triangle how it should look like*/
.arrow{
width:0;
height:0;
border-top:20px solid transparent;
border-bottom:20px solid transparent;
border-left:20px solid green;
}
Changing the triangle to position: absolute; and adding position: relative; to the .box fixes it. It seems to be inheriting the height of the box.
if you want to do [this][1] !
insert an div class arrow in the div class box may be the only solution.
[1]: https://jsfiddle.net/ouvqLa3k/
html{
padding:50px
}
.box{
position : relative;
background:red;
height:40px;
width:100px;
border : 0px;
}
/*
.box:after{
position : relative;
content:"";
width:0;
height:0;
border-top:20px solid transparent;
border-bottom:20px solid transparent;
border-left:20px solid green;
}
*/
.arrow{
width:0;
height:0;
border-top:20px solid transparent;
border-bottom:20px solid transparent;
border-left:20px solid green;
}
<div class="box">
<div class="arrow">
</div>
</div>
<br><br><br>
<div class="arrow">
</div>