HTML:
<header>
Header text.
</header>
<main>
Your content here.
</main>
CSS:
header {
position: relative;
background: #5fa3c6;
padding: 8px 10px;
color: #ffffff;
font-size: 20px;
}
header:before {
z-index: -1;
position: absolute;
width: 14px;
height: 14px;
background: #3b6c8a;
content: '';
left: 3px;
bottom: -7px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
main {
margin-left: 10px;
border-left: 1px #5fa3c6 solid;
padding: 10px;
background: #ffffff;
}
Fiddle: http://jsfiddle.net/LutJQ/3/
How can i achieve something like this below? I tried with transform property but no luck.
The usual way to do this is with borders:
header:before {
content: "";
border: 10px solid transparent;
border-right: 10px solid blue;
border-top: 10px solid blue;
position: absolute;
bottom: -20px;
left: 0;
}
No CSS3 required so browser compatibility is great.
You are missing some SkewX()
-webkit-transform: skewX(45deg) rotate(45deg);
-moz-transform: skewX(45deg) rotate(45deg);
-o-transform: skewX(45deg) rotate(45deg);
-ms-transform: skewX(45deg) rotate(45deg);
transform: skewX(45deg) rotate(45deg);
JSFiddle : http://jsfiddle.net/LutJQ/9/
Solution without rotate
header:before {
z-index: -1;
position: absolute;
content: '';
left: 0px;
bottom: -10px;
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right:10px solid #476473;
}
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.