Создайте эту форму в CSS

Question

Пожалуйста, обратите внимание на этом изображении:

Я прошу прощения за свой бесполезный красочным способности :-)

Как я могу нарисовать что-то форма в CSS, как ) без использования текста в div, только чистый css.

Я попытался сделать его изогнутым, как в примере, но я не знаю, как его изгибать из центра.

Что мне делать, чтобы сделать такую ​​форму в css?

Спасибо.

Answer 1

Вот один из способов реализации этого, , но Обратите внимание, что любой текст в этом элементе не будет поддерживать иллюзию кривой. Поэтому я не уверен, насколько это было бы полезно для вас, но поскольку вы не указали свой прецедент, кажется, стоит опубликовать его, возможно, он может быть каким-то образом использован. Если только как идея для того, как вы могли бы продолжить:

#box { 
    display: block; 
    margin: 2em auto; 
    width: 10em; 
    height: 5em; 
    background-color: black; 
    position: relative; 
} 

#box:before { 
    position: absolute; 
    top: -1em; 
    left: 0; 
    right: 0; 
    height: 2em; 
    background-color: #fff; 
    content: ' '; 
    border-radius: 50%; 
} 

#box:after { 
    position: absolute; 
    bottom: -1em; 
    left: 0; 
    right: 0; 
    height: 2em; 
    background-color: #000; 
    content: ' '; 
    border-radius: 50%; 
} 

JS Fiddle demo.

Answer 2

Ваш пример, похоже, похож на шевронную форму, простите меня, если это не так, но если вам повезло, вы можете сделать шевроновую форму, используя чистый CSS.

.chevron { 
 
    position: relative; 
 
    text-align: center; 
 
    padding: 12px; 
 
    margin-bottom: 6px; 
 
    height: 60px; 
 
    width: 200px; 
 
} 
 

 
.chevron:before { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    height: 100%; 
 
    width: 51%; 
 
    background: black; 
 
    transform: skew(0deg, 6deg); 
 
} 
 
.chevron:after { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    height: 100%; 
 
    width: 50%; 
 
    background: black; 
 
    transform: skew(0deg, -6deg); 
 
}

<div class="chevron"></div>

Вы можете найти оригинальный пример и некоторые другие формы here