How can you make such a div? Please explain how to do this with shape-inside: polygon() . I do not understand how to properly register x1y1 , x2y2 , x3y3 , x4y4 . From what angle does the reading go, in which units to measure the coordinates?
.hh { background: rgba(0, 0, 0, .5); width: 300px; position: relative; height: 2em; } .hh:after { box-sizing: border-box; position: absolute; content: ''; width: 2em; height: 100%; left: 100%; top: 0; border: 1em solid rgba(0, 0, 0, 0.5); border-color: rgba(0, 0, 0, 0.5) transparent transparent rgba(0, 0, 0, 0.5); } <div class="hh"></div> If I understand you correctly. Or should be fundamentally <div> ?
PS: Now how it works.
Everything is based on the fact that the corner joint of the borders is made at an angle of 45 °. At the same time, the color and transparency of the border does not matter;
div { width: 42pt; height: 42pt; border: 2em solid; border-color: orange lightgreen blue transparent; } <div></div> The .hh:after pseudo- .hh:after is a square with a side in height of the main element ( .hh ) located on the right side of this element. With the effect described in paragraph 1, this square was turned into a triangle.
.hh { background: rgba(0, 0, 0, .5); width: 300px; position: relative; height: 2em; } .hh:after { box-sizing: border-box; position: absolute; content: ''; width: 2em; height: 100%; left: 100%; top: 0; border: 1em solid red; border-color: red transparent transparent red; } <div class="hh"></div> 
Source: https://ru.stackoverflow.com/questions/599151/
All Articles