I want to create a shape like this but the hollow goes in the bottom. what can I do?
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
width: 0;
height: 100px;
border: 50px solid #1abc9c;
border-top: 0 solid;
border-bottom: 35px solid rgba(0,0,0,0);
font: normal 100%/normal Arial, Helvetica, sans-serif;
color: rgba(0,0,0,1);
-o-text-overflow: clip;
text-overflow: clip;
-webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
-moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
-o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
-webkit-transform: translateX(21px) ;
transform: translateX(21px) ;
make it easy
.ribbon {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
width: 0;
height: 100px;
border: 50px solid #1abc9c;
border-top: 0 solid;
border-bottom: 35px solid rgba(0,0,0,0);
font: normal 100%/normal Arial, Helvetica, sans-serif;
color: rgba(0,0,0,1);
-o-text-overflow: clip;
text-overflow: clip;
}
.ribbon { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; width: 0; height: 100px; border: 50px solid #1abc9c; border-top: 0 solid; border-bottom: 35px solid rgba(0,0,0,0); font: normal 100%/normal Arial, Helvetica, sans-serif; color: rgba(0,0,0,1); -o-text-overflow: clip; text-overflow: clip; }
<div class="ribbon"></div>
Few lines of CSS will achieve this
div { display: inline-block; position: relative; height: 0px; width: 0px; border: 25px solid green; border-left: 25px solid transparent; margin-right:75px; } div:after { display: inline-block; position: absolute; top: -25px; content: ''; width: 100px; height: 50px; background-color: green; }
<div></div> Some content<br>Something
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.