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

Question

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

Я прошу прощения за мою бесполезную способность рисовать: -)

Как я могу нарисовать такую ​​формув CSS, как ) без использования текста в div, просто pure 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 .

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>

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