css figure http://www.renemax.nl/css.jpgСоздать рисунок в CSS
Мне нужно создать фигуру, подобную этой, с помощью CSS-кодов. Черный может быть полностью покрыт фоновым изображением или более мягким цветом фона с текстом (кавычками) на нем.
Можно ли создать с помощью CSS? Я не могу найти эту цифру с помощью генераторов css в Интернете.
Любые советы, оцененные.
.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>
Это очень точную форму. Вы рассматривали использование SVG? –
Если вы можете использовать изображения, ознакомьтесь с этим [учебником] (http://www.w3schools.com/css/css3_border_images.asp) – Pugazh
Если вам нужно заполнить эту цифру фоновым изображением, вы можете сделать это только с помощью SVG или Холст, а не CSS. –