我想创建一个仅使用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: https://dev59.com/uGct5IYBdhLWcg3wk-Vq
// 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;
}
<figure class="one"></figure>
<figure class="two"></figure>
<figure class="three"></figure>
<figure class="four"></figure>
<figure class="svg">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="81px" height="104px" viewBox="0 0 81 104">
<g transform="translate(1, 1)"><path fill="#FFFFFF" stroke="#CCCCCC" stroke-width="2" d="M78.399,39.2c0,36.998-39.199,62.599-39.199,62.599S0,76.198,0,39.2C0,17.55,17.551,0,39.2,0 C60.848,0,78.399,17.55,78.399,39.2z"/></g>
</svg>
</figure>
<!-- Image -->
<figure class="five"></figure>