CSSの図を作成する

Question

css figure http://www.renemax.nl/css.jpg

このような図をCSSコードで作成する必要があります。黒は完全に背景画像で覆われていてもよいし、より柔らかい背景色でテキスト（引用符）で覆われていてもよい。

これはCSSで作成できますか？私はcssジェネレータをオンラインでこの数字を見つけることができません。

ヒントありがとうございます。非常に正確な形状である

Answer 1

.element { 
 
    position: relative; 
 
    background: #000; 
 
    margin: 20px auto; 
 
    padding: 20px; 
 
    height: 300px; 
 
    width: 200px; 
 
    color: #fff; 
 
} 
 

 
.element:before, 
 
.element:after, 
 
.element .box:before, 
 
.element .box:after{ 
 
    transform: rotate(-45deg); 
 
    top: calc(50% - 50px); 
 
    border-radius: 5px; 
 
    position: absolute; 
 
    background: #000; 
 
    content: ''; 
 
    height: 100px; 
 
    width: 100px; 
 
    z-index: -1; 
 
    left: 0; 
 
} 
 
.element:after, 
 
.element .box.top:after, 
 
.element .box.bottom:after { 
 
    right: 0; 
 
    left: auto; 
 
} 
 

 
.element .box.top:before, 
 
.element .box.top:after { 
 
    top: 0; 
 
} 
 

 
.element .box.bottom:before, 
 
.element .box.bottom:after { 
 
    top: auto; 
 
    bottom: 0; 
 
}

<div class="element"> 
 
    Content Goes Here.... 
 
    
 
    <div class="box top"></div> 
 
    <div class="box bottom"></div> 
 
</div>