Does anyone know how to do this in CSS?
This is for the navigation tabs for jQuery UI tabs. I can't get the border-radius to work. Currently, I can do this shape but with no radius on top-left and top-right.
border-right: 47px solid transparent;
border-bottom: 35px solid #415049;
border-left: 15px solid transparent;
-webkit-border-radius: 5px 5px 0 0px;
-moz-border-radius: 5px 5px 0 0px;
border-radius: 5px 5px 0 0px;
height: 0;
background:none;
Any help would be appreciated.
Here is your answer
If you want shape like this use :before :after
I have created fiddle for you
Here is code
HTML
<div><span></span></div>
CSS
div > span {
background-color: #333333;
border-radius: 6px;
display: inline-block;
height: 50px;
width: 200px;
}
div {
display: inline-block;
height: 43px;
overflow: hidden;
padding: 0 106px 0 46px;
position: relative;
width:
}
div:after {
background-color: #333333;
border-radius: 10px;
content: " ";
height: 100px;
position: absolute;
right: 44px;
top: 15px;
transform: rotate(30deg);
width: 100px;
}
div:before {
background-color: #333333;
border-radius: 8px;
content: " ";
height: 50px;
left: 39px;
position: absolute;
top: 6px;
transform: rotate(15deg);
width: 50px;
}
Here is fiddle for you http://jsfiddle.net/96sv3/2/
Hope this helps you :)
Oh, man! Been there done that.
You can use background images for the tabs and tab states.
Or; try border radius defining left, right, top, bottom.
EG.
border-bottom-left-radius:2em;
http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_border-bottom-left-radius
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.