How to design a image through css [duplicate] - html

Question

This question already has answers here:
Wave (or shape?) with border on CSS3
(5 answers)
Closed 6 years ago.
How to design This Image
I want to design this type image.

Answer 1

.container {
background: #fff;
padding: 20px;
}
.round {
width: 100px;
height: 100px;
border: solid 2px #000;
position: relative;
}
.round:before {
content: '';
width: 20px;
height: 20px;
background: #fff;
border-bottom: solid 2px #000;
position: absolute;
top: -12px;
left: -11px;
transform: rotate(315deg);
}
.round:after {
content: '';
width: 20px;
height: 20px;
background: #fff;
border-top: solid 2px #000;
position: absolute;
bottom: -12px;
right: -11px;
transform: rotate(315deg);
}
<div class="container">
<div class="round"></div>
</div>
hat do you think?

Answer 2

Perhaps look at using an inline svg image, this would give you control over background image, and would allow for the shape to "scale", and if you like, change the background color (fill) when you like.
HTML
<div class="cornered-box">
<div class="svg-cont">
<svg width="200px" height="200px" viewBox="635 375 202 202" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<polygon id="path-1" points="675.163277 376 836 376 836 535.221624 796.221624 575 636 575 636 414.163277"></polygon>
</defs>
<use stroke="#000000" stroke-width="2" fill="transparent" xlink:href="#path-1"></use>
</svg>
</div>
<div class="cornered-box-content">
<p>
Some content for the box
</p>
</div>
</div>
CSS
.cornered-box{
height:200px;
width:200px;
position: relative;
padding:20px 5px;
box-sizing:border-box;
}
.cornered-box .svg-cont{
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
z-index:-1;
}
.cornered-box .svg-cont svg{
height:100%;
width:100%;
}
.cornered-box .svg-cont svg use{
fill:transparent;
transition: fill 0.2s ease-in-out;
}
.cornered-box:hover .svg-cont svg use{
fill:#F00;
}
JSFIDDLE
Link to SVG