Hi guys consider the picture below
is it possible to create such a shape with css? If so can you give me some clues or an example?
1
-
Once you can try css-tricks.com/examples/ShapesOfCSSMomin– Momin2017-03-30 11:00:46 +00:00Commented Mar 30, 2017 at 11:00
Add a comment
|
2 Answers
Try this code
.cshape {
height: 300px;
width: 250px
background: #92a8eb;
background: -moz-linear-gradient(left, #92a8eb 0%, #96c0ea 50%, #9ce4e8 100%);
background: -webkit-linear-gradient(left, #92a8eb 0%, #96c0ea 50%, #9ce4e8 100%);
background: linear-gradient(to right, #92a8eb 0%, #96c0ea 50%, #9ce4e8 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#92a8eb', endColorstr='#9ce4e8', GradientType=1);
-webkit-clip-path: polygon(0 0, 100% 0, 37% 28%, 0 25%);
clip-path: polygon(0 0, 100% 0, 37% 28%, 0 25%);
}<div class='cshape'>
</div>
3 Comments
Petros Kyriakou
thank you for this! can i add a background-image as a fallback if its unsupported in the browser?
Momin
Yes you can! but I added background for fallback!
Petros Kyriakou
Hey thank you for the help. Well the image will be a fallback if the clip-path fails so i need both the background for clip-path and background-image for when the clip-path is not available, is that possible? if so, can i ask how?
I have tried this, check this once
#chevron {
position: relative;
text-align: center;
padding: 12px;
margin-bottom: 6px;
height: 60px; width: 100%;
}
#chevron:before {
content: '';
position: absolute;
top: -32px;
left: 0;
height: 140px;
width: 51%;
background: -webkit-linear-gradient(left, #9cb0ed, #a1ceec); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(right,#9cb0ed, #a1ceec); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(right, #9cb0ed, #a1ceec); /* For Firefox 3.6 to 15 */
background: linear-gradient(to right, #9cb0ed, #a1ceec); /* Standard syntax (must be last) */
-webkit-transform: skew(0deg, 6deg);
-moz-transform: skew(0deg, 6deg);
-ms-transform: skew(0deg, 6deg);
-o-transform: skew(0deg, 6deg);
transform: skew(0deg, 6deg);
}
#chevron:after {
content: '';
position: absolute;
top: -110px;
right: 90px;
height: 140px;
width: 35%;
background: -webkit-linear-gradient(left, #a1ceec, #9cb0ed); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(right, #a1ceec, #9cb0ed); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(right, #a1ceec, #9cb0ed); /* For Firefox 3.6 to 15 */
background: linear-gradient(to right, #a1ceec, #9cb0ed); /* Standard syntax (must be last) */
-webkit-transform: skew(0deg, -6deg);
-moz-transform: skew(0deg, -40deg);
-ms-transform: skew(0deg, -40deg);
-o-transform: skew(0deg, -40deg);
transform: skew(0deg, -40deg);
}<div id="chevron"></div>