Я пытаюсь создать DIV в CSS с внутренней овальной формы к нему, как это.
На данный момент у меня есть форма, которая направлена наружу, а не внутрь (JS Fiddle Link).
.shape {
float: left;
width: 100px;
height: 50px;
border: none;
background: #CC0000;
border-radius: 0 90px 0 0;
-moz-border-radius: 0 90px 0 0;
-webkit-border-radius: 0 90px 0 0;
background-image: -webkit-gradient( linear, left top, right bottom, color-stop(0, #520C0C), color-stop(1, #CC0000) );
background-image: -o-linear-gradient(right bottom, #520C0C 0%, #CC0000 100%);
background-image: -moz-linear-gradient(right bottom, #520C0C 0%, #CC0000 100%);
background-image: -webkit-linear-gradient(right bottom, #520C0C 0%, #CC0000 100%);
background-image: -ms-linear-gradient(right bottom, #520C0C 0%, #CC0000 100%);
background-image: linear-gradient(to right bottom, #520C0C 0%, #CC0000 100%);
}
Любые идеи о том, как это сделать?
Посмотрите на мой пример скрипки.
Я использовал псевдоэлемент и некоторый эллиптический радиус границы в сочетании с тенью вставки.
div {
position:relative;
width: 200px;height: 100px;
background: #CC0000;
background-image: linear-gradient(to right bottom, #520C0C 0%, #CC0000 100%);
}
div:after {
position:absolute;content:"";
width: 100%;height: 95%;
background: #222;
box-shadow:inset 10px -10px 5px -10px #000;
border-radius: 0 0 0 200px / 100px;
}
С меньшими усилиями, вероятно, можно приблизиться к вашему результату, но это может быть хорошей отправной точкой.
Я создал эту скрипку для вас. Вот код:
HTML
<div class="container">
<div class="shape"></div>
</div>
CSS
.container {
float: left;
width: 100px;
height: 50px;
border: none;
background: #CC0000;
background-image: -webkit-gradient( linear, left top, right bottom, color-stop(0, #520C0C), color-stop(1, #CC0000) );
background-image: -o-linear-gradient(right bottom, #520C0C 0%, #CC0000 100%);
background-image: -moz-linear-gradient(right bottom, #520C0C 0%, #CC0000 100%);
background-image: -webkit-linear-gradient(right bottom, #520C0C 0%, #CC0000 100%);
background-image: -ms-linear-gradient(right bottom, #520C0C 0%, #CC0000 100%);
background-image: linear-gradient(to right bottom, #520C0C 0%, #CC0000 100%);
}
.shape {
width: 100px;
height: 50px;
border: none;
background: #000000;
border-radius: 0 0 0 90px;
-moz-border-radius: 0 0 0 90px;
-webkit-border-radius: 0 0 0 90px;
}
Если часть графика, которая "не существует", не должна быть фактически прозрачной, тогда вы можете просто создать правильный прямоугольник и построить изогнутую форму, которая будет сидеть поверх прямоугольника и иметь тот же цвет, что и фон.
.shape {
float: left;
width: 100px;
height: 50px;
border: none;
background: #CC0000;
background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0, #520C0C), color-stop(1, #CC0000));
background-image: -o-linear-gradient(right bottom, #520C0C 0%, #CC0000 100%);
background-image: -moz-linear-gradient(right bottom, #520C0C 0%, #CC0000 100%);
background-image: -webkit-linear-gradient(right bottom, #520C0C 0%, #CC0000 100%);
background-image: -ms-linear-gradient(right bottom, #520C0C 0%, #CC0000 100%);
background-image: linear-gradient(to right bottom, #520C0C 0%, #CC0000 100%);
position:relative;
}
.shape:before {
border-radius: 0 90px 0 0;
-moz-border-radius: 0 90px 0 0;
-webkit-border-radius: 0 90px 0 0;
content:'';
position:absolute;
top:0;
left:0;
background:white;
width:100%;
height:100%;
}
Тень будет немного сложнее, и у меня пока нет решения.
Также jsfiddle имеет опрятную кнопку, которая супер полезна.