Working with The Shapes of CSS is very easy. In demo you can find all types of shapes using CSS3.
In this article we’re aiming to re-examine the fundamentals of declaring shapes, and making some straightforward layouts mistreatment these new CSS technologies. once additional CSS Shapes options area unit enforced, additional complicated and awful layouts are potential, however even with what we’ve got at hand currently, some attention-grabbing and really inventive layouts is created with a bit additional experimentation.
CSS Square Shape
<div class="square"></div>
<style>
.square{
width:100px;
height:100px;
background: #007bb6;
}
</style>CSS parallelogram Shape 1
<div class="rectangle"></div>
<style>
.rectangle{
width:100px;
height:60px;
background: #dd4b39;
}
</style>CSS trapez Shape Top
<div class="trapez"></div>
<style>
.trapez{
height: 0;
width:200px;
border-bottom: 100px solid blue;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
}
</style>CSS trapez Shape Bottom
<div class="trapez2"></div>
<style>
.trapez2{
height: 0;
width:200px;
border-top: 100px solid blue;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
}
</style>CSS trapez Shape Left
<div class="trapez3"></div>
<style>
.trapez3{
height: 200px;
width:0;
border-right: 100px solid blue;
border-top: 60px solid transparent;
border-bottom: 60px solid transparent;
}
</style>CSS trapez Shape Right
<div class="trapez4"></div>
<style>
.trapez4{
height: 200px;
width:0;
border-left: 100px solid blue;
border-top: 60px solid transparent;
border-bottom: 60px solid transparent;
}
</style>CSS Triangle Up Shape
<div class="triangleup"></div>
<style>
.triangleup{
height: 0;
width:0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}
</style>CSS Triangle Right Shape
<div class="triangleright"></div>
<style>
.triangleright{
height: 0;
width:0;
border-left: 100px solid red;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
}
</style>CSS Triangle Down Shape
<div class="triangledown"></div>
<style>
.triangledown{
height: 0;
width:0;
border-left: 50px solid transparent;
border-top: 100px solid red;
border-right: 50px solid transparent;
}
</style>CSS Triangle Left Shape
<div class="triangleleft"></div>
<style>
.triangleleft{
height: 0;
width:0;
border-bottom: 50px solid transparent;
border-top: 50px solid transparent;
border-right: 100px solid red;
}
</style>CSS Half Circle Top Shape
<div class="halfcircletop"></div>
<style>
.halfcircletop{
height: 45px;
width:90px;
background: gray;
-moz-border-radius: 90px 90px 0 0;
-webkit-border-radius: 90px 90px 0 0;
-o-border-radius: 90px 90px 0 0;
border-radius: 90px 90px 0 0;
}
</style>CSS Half Circle Right Shape
<div class="halfcircleright"></div>
<style>
.halfcircleright{
height: 90px;
width:45px;
background: gray;
-moz-border-radius: 0 90px 90px 0;
-webkit-border-radius: 0 90px 90px 0;
-o-border-radius: 0 90px 90px 0;
border-radius: 0 90px 90px 0;
}
</style>CSS Half Circle Bottom Shape
<div class="halfcirclebottom"></div>
<style>
.halfcirclebottom{
height: 45px;
width:90px;
background: gray;
-moz-border-radius: 0 0 90px 90px;
-webkit-border-radius: 0 0 90px 90px;
-o-border-radius: 0 0 90px 90px;
border-radius: 0 0 90px 90px;
}
</style>CSS Half Circle Left Shape
<div class="halfcircleleft"></div>
<style>
.halfcircleleft{
height: 90px;
width:45px;
background: gray;
-moz-border-radius: 90px 0 0 90px;
-webkit-border-radius: 90px 0 0 90px;
-o-border-radius: 90px 0 0 90px;
border-radius: 90px 0 0 90px;
}
</style>CSS Circle Shape
<div class="circle"></div>
<style>
.circle{
height: 90px;
width:90px;
background: #03A9F4;
-moz-border-radius: 90px;
-webkit-border-radius: 90px;
-o-border-radius: 90px;
border-radius: 90px;
}
</style>CSS Oval horizontal Shape
<div class="ovalhorizontal"></div>
<style>
.ovalhorizontal{
height: 90px;
width:180px;
background: #03A9F4;
-moz-border-radius: 90px/45px;
-webkit-border-radius: 90px/45px;
-o-border-radius: 90px/45px;
border-radius: 90px/45px;
}
</style>CSS Oval Vertical Shape
<div class="ovalvertical"></div>
<style>
.ovalvertical{
height: 180px;
width:90px;
background: #03A9F4;
-moz-border-radius: 45px/90px;
-webkit-border-radius: 45px/90px;
-o-border-radius: 45px/90px;
border-radius: 45px/90px;
}
</style>CSS half quarter circle top left Shape
<div class="halfquartercircletopleft"></div>
<style>
.halfquartercircletopleft{
height: 90px;
width:90px;
background: #4CAF50;
-moz-border-radius: 90px 0 0 0;
-webkit-border-radius: 90px 0 0 0;
-o-border-radius: 90px 0 0 0;
border-radius: 90px 0 0 0;
}
</style>CSS half quarter circle top right Shape
<div class="halfquartercircletopright"></div>
<style>
.halfquartercircletopright{
height: 90px;
width:90px;
background: #4CAF50;
-moz-border-radius: 0 90px 0 0;
-webkit-border-radius: 0 90px 0 0;
-o-border-radius: 0 90px 0 0;
border-radius: 0 90px 0 0;
}
</style>CSS half quarter circle bottom right Shape
<div class="halfquartercirclebottomright"></div>
<style>
.halfquartercirclebottomright{
height: 90px;
width:90px;
background: #4CAF50;
-moz-border-radius: 0 0 90px 0;
-webkit-border-radius: 0 0 90px 0;
-o-border-radius: 0 0 90px 0;
border-radius: 0 0 90px 0;
}
</style>CSS half quarter circle bottom left Shape
<div class="halfquartercirclebottomleft"></div>
<style>
.halfquartercirclebottomleft{
height: 90px;
width:90px;
background: #4CAF50;
-moz-border-radius: 0 0 0 90px;
-webkit-border-radius: 0 0 0 90px;
-o-border-radius: 0 0 0 90px;
border-radius: 0 0 0 90px;
}
</style>CSS Chart top Shape
<div class="charttop"></div>
<style>
.charttop{
height: 0;
width:0;
border: 60px solid #FFC107;
border-top: 60px solid transparent;
-moz-border-radius: 60px;
-webkit-border-radius: 60px;
-o-border-radius: 60px;
border-radius: 60px;
}
</style>CSS Chart Right Shape
<div class="chartright"></div>
<style>
.chartright{
height: 0;
width:0;
border: 60px solid #FFC107;
border-right: 60px solid transparent;
-moz-border-radius: 60px;
-webkit-border-radius: 60px;
-o-border-radius: 60px;
border-radius: 60px;
}
</style>CSS Chart Bottom Shape
<div class="chartbottom"></div>
<style>
.chartbottom{
height: 0;
width:0;
border: 60px solid #FFC107;
border-bottom: 60px solid transparent;
-moz-border-radius: 60px;
-webkit-border-radius: 60px;
-o-border-radius: 60px;
border-radius: 60px;
}
</style>CSS Chart Left Shape
<div class="chartleft"></div>
<style>
.chartleft{
height: 0;
width:0;
border: 60px solid #FFC107;
border-left: 60px solid transparent;
-moz-border-radius: 60px;
-webkit-border-radius: 60px;
-o-border-radius: 60px;
border-radius: 60px;
}
</style>CSS heart Shape
<div class="heart"></div>
<style>
.heart{
background-color: red;
display: inline-block;
height: 100px;
margin: 0 10px;
position: relative;
top: 0;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
width: 100px;
}
.heart:before,.heart:after{
content: "";
background-color: red;
border-radius: 50%;
height: 100px;
position: absolute;
width: 100px;
}
.heart:before{
top: -42px;
left: 0;
}
.heart:after{
left: 42px;
top: 0;
}
</style>CSS Triangle up Left Shape
<div class="triangleupLeft"></div>
<style>
.triangleupLeft{
height: 0;
width:0;
border-top: 50px solid #795548;
border-left: 50px solid #795548;
border-right: 50px solid transparent;
border-bottom: 50px solid transparent;
}
</style>CSS Triangle up Right Shape
<div class="triangleupright"></div>
<style>
.triangleupright{
height: 0;
width:0;
border-top: 50px solid #795548;
border-left: 50px solid transparent;
border-right: 50px solid #795548;
border-bottom: 50px solid transparent;
}
</style>CSS Triangle Bottom Right Shape
<div class="trianglebottomright"></div>
<style>
.trianglebottomright{
height: 0;
width:0;
border-top: 50px solid transparent;
border-left: 50px solid transparent;
border-right: 50px solid #795548;
border-bottom: 50px solid #795548;
}
</style>CSS Triangle Bottom Left Shape
<div class="trianglebottomleft"></div>
<style>
.trianglebottomleft{
height: 0;
width:0;
border-top: 50px solid transparent;
border-left: 50px solid #795548;
border-right: 50px solid transparent;
border-bottom: 50px solid #795548;
}
</style>CSS Bookmark Ribbon Shape
<div class="bookmarkribbon"></div>
<style>
.bookmarkribbon{
height: 0;
width:0;
border-top: 50px solid #03a9f4;
border-left: 50px solid #03a9f4;
border-right: 50px solid #03a9f4;
border-bottom: 50px solid transparent;
}
</style>CSS Funky Hour Glasses Shape
<div class="funkyhourglasses"></div>
<style>
.funkyhourglasses{
width: 64px;
height: 100px;
background-color: #7de3f5;
position: relative;
overflow: hidden;
}
.funkyhourglasses:before {
content: "";
width: 0;
height: 0;
display: block;
position: absolute;
z-index: 30;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-left: 30px solid #ffffff;
}
.funkyhourglasses:after {
content: "";
width: 0;
height: 0;
right: 0;
display: block;
position: absolute;
z-index: 30;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-right: 30px solid #ffffff;
}
</style>
Leave a Reply