I'm interested if it's possible to create wrapped (or maybe better said twisted) border using CSS. Effect I wanted to achieve is in the picture.
See Question&Answers more detail:osI'm interested if it's possible to create wrapped (or maybe better said twisted) border using CSS. Effect I wanted to achieve is in the picture.
See Question&Answers more detail:osMost easiest and neat solution would be to use svg
to create the border.
#container {
position: relative;
width: 200px;
height: 30px;
}
#content {
text-transform: uppercase;
position: absolute;
width: 200px;
height: 30px;
top: 0;
text-align: center;
line-height: 30px;
}
<div id="container">
<svg width="200" height="30" viewBox="-1 -2 201 33">
<path d="M0,0 h200 l-15,15 l15,15 h-200 l15,-15z" stroke="black" stroke-width="2" fill="none" />
</svg>
<div id="content">lorem ipsum</div>
</div>