Как вот правильно реализовать такой элемент?

Question

[sergey]

Кто подскажет или поможет реализовать вот такой элемент
пробовал некоторые варианты но выходит ерунда

Comments

[sergey]

Александр А: а как?

Answer 1

[Дмитрий Еремин]

В самом простом виде:
<div class="cls"/>

.cls{
  height: 100px;
  width: 100px;
  border: 1px solid black;
  border-radius: 100% 0% 100% 100%;
}

Comments

[sergey]

а в кроссбраузерном?

[Дмитрий Приходченко]

SM: все уже поддерживается, на дворе не 2008

[sergey]

Дмитрий Приходченко: :)))

[Дмитрий Еремин]

SM:

border-radius.com - вот этот вот ресурс предлашает вот такой вариант

-webkit-border-radius: 100%;
-webkit-border-top-right-radius: 0;
-moz-border-radius: 100%;
-moz-border-radius-topright: 0;
border-radius: 100%;
border-top-right-radius: 0;

[sergey]

EreminD: ок спасибо

[Сергей delphinpro]

EreminD: Префиксы для border-radius уже несколько лет неактуальны. caniuse.com/#search=border-radius

[Дмитрий Еремин]

Сергей: так я, собственно, в первом варианте и указал (border-radius: 100% 0% 100% 100%;)
Но на звание гуру css не претендую))