Я хочу создать форму CSS , которая выглядит как маркер или медиатор.
Моя демо-версия Codepen, над которой я работал:http://codepen.io/Vestride/pen/otcem
// CSS Marker
// I was attempting to make this shape in CSS. The marker on the far right is an image. Next to it is SVG. The rest are my attempts :|
// stackoverflow question: http://stackoverflow.com/questions/11982066/css-only-marker-shape
// Top part is a perfect circle
// Bottom half is edges that curve out!
body {
margin: 40px 20px;
background: url(http://subtlepatterns.com/patterns/furley_bg_@2X.png) ;
background-size: 600px 600px;
}
figure {
position: relative;
float: left;
margin-left: 60px;
width: 80px;
height: 80px;
}
figure:first-child {
margin-left: 0;
}
.one {
border-radius: 50% 50% 0 50%;
background: hotpink;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.two {
background: skyblue;
border-top-left-radius: 50%;
border-top-right-radius: 50% 100%;
border-bottom-left-radius: 100% 50%;
border-bottom-right-radius: 0%;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.three {
border-radius: 50%;
background: lightgreen;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.three::before {
content: '';
position: absolute;
width: 106%;
height: 106%;
background: lightgreen;
border-top-left-radius: 60%;
border-top-right-radius: 50% 100%;
border-bottom-left-radius: 100% 50%;
border-bottom-right-radius: 0%;
}
.four {
border-radius: 50% 50% 0 50%;
background: seagreen;
overflow-x: visible;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.four::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
background: red;
border-top-left-radius: 50%;
border-top-right-radius: 50% 100%;
border-bottom-left-radius: 100% 50%;
border-bottom-right-radius: 0%;
}
.five {
width: 80px;
height: 102px;
background-image: url(http://i.imgur.com/t80ZS.png);
/* Overlay the objective */
/*margin-left: -80px;
opacity: 0.6;*/
}
.svg {
position: relative;
float: left;
margin-left: 60px;
}
Мне не удалось точно воспроизвести изогнутые края. В идеале я хотел бы сделать это с помощью одного элемента (+ псевдоэлементов ).