logo标签列表

仅使用CSS实现标记形状

csscss-shapes
12
我想创建一个仅使用CSS的形状，看起来像一个标记或吉他拨片。

Marker shape

我正在使用的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>

我尝试复制点的曲线边缘，但未成功。理想情况下，我希望能够使用一个元素（+伪元素）来完成此操作。
1
你为什么想在CSS中这样做？ - Spudley
如果解决方案已经存在，为什么不多研究一下他们的代码呢？ - Kyle
@Spudley 减少一个 HTTP 请求（这是一个大精灵，因为它是动画），我不必为高分辨率屏幕创建两个不同版本的图像，并且我想挑战自己。Kyle - 那是我的代码 ;) - Vestride
啊哈，我不知道那个:D 呵呵。 - Kyle
我仍然认为我会使用不同的解决方案。SVG似乎是更合适的解决方案，而且它也可以嵌入到你的HTML中。 - Spudley
显示剩余2条评论
3个回答
6
非常接近了，但仍然可以注意到它是两个形状。 - Vestride
更接近了，但上半部分是一个完美的圆。如果你把大小增加到比如200像素乘以200像素，你就可以看到两个形状。此外，我希望找到一种方法使下半部分的边缘稍微向外弯曲一点。 - Vestride
好的，看这个我现在做了：http://codepen.io/anon/pen/DKyut但是请注意，如果你想增加它的大小，宽度和高度之间有这个比例：w:h = 8:7（h=高度，w=宽度），所以假设你想要高度为200px，宽度将是200*8/7 = 228.57。我所说的高度和宽度是“figure”的高度和宽度。祝你好运！ - Dan Barzilay
另一个修复...与上一条评论相同，但链接和比例不同：http://codepen.io/anon/pen/jkdsg，比例为：`w:h = 76:70`。 - Dan Barzilay
我会接受你的答案，因为它比我能做到的更接近，但它仍然不够好，无法替换图像。 - Vestride
4

使用SVG

您可以使用内联SVG来实现标记形状。下面的示例使用带有两个三次贝塞尔曲线命令的路径元素：

svg{width:80px;height:100px;}
<svg viewbox="0 0 80 100">
  <path d="M40 99.5 C-22.5 57.5 0 0 40 0.5 C80 0 102.5 57.5 40 99.5z" stroke-width="1" stroke="grey" fill="transparent"/>
</svg>

使用CSS

您也可以仅使用CSS来制作标记形状，使用边框半径、绝对定位和2个伪元素。请注意，此示例仅使用一个div元素。

div{
  position:relative;
  width:80px;
  height:102px;
  overflow:hidden;
  border-radius:40px;
}
div:before, div:after{
  content:'';
  position:absolute;
  top:0px;
  width:240px;
  height:150px;
  border:1px solid green;  
}
div:before{
  left:0;
  border-top-left-radius:40px;
  border-bottom-left-radius:240px 110px;
}
div:after{
  right:0;
  border-top-right-radius:40px;
  border-bottom-right-radius:240px 110px;
}
<div></div>

1

<svg x="0px" y="0px" width="32px" height="45px"
  viewBox="38 12 128 180" style="cursor:help;" >
<style type="text/css">
 .st0{ fill:#FFF;stroke:#000;stroke-width:6;stroke-miterlimit:10;}
 .st1{fill:#FFFFFF;}
 .st2{fill:#1309FF;}
 .st3{fill:#1309FF;}
 .st4{fill:#1309FF;}
 .st6{font-size:57.2285px;}
</style>
<path class="st0" d="M158.5,73.8c0-32.3-26.2-58.4-58.4-58.4c-32.3,0-58.4,26.2-58.4,58.4c0,16.6,6.9,31.5,18,42.1
 c7.2,7.2,16.7,17.2,20.1,22.5c7,10.9,20,47.9,20,47.9s13.3-37,20.4-47.9c3.3-5.1,12.2-14.4,19.3-21.6
 C151.2,106.1,158.5,90.9,158.5,73.8z"/>
<circle class="st4" cx="100.1" cy="74.7" r="44.1"/>
   <text x="100" y="90" class="st1 st5 st6" text-anchor="middle" >12</text>
</svg>

This will be better OR This 
<svg width="32px" height="45px" viewBox="38 12 128 180" >
  <path style="fill:#FFFFFF;stroke:#020202;stroke-width:4;stroke-miterlimit:10;" d="M158.5,73.8c0-32.3-26.2-58.4-58.4-58.4c-32.3,0-58.4,26.2-58.4,58.4c0,16.6,6.9,31.5,18,42.1c7.2,7.2,16.7,17.2,20.1,22.5c7,10.9,20,47.9,20,47.9s13.3-37,20.4-47.9c3.3-5.1,12.2-14.4,19.3-21.6C151.2,106.1,158.5,90.9,158.5,73.8z"/>
  <circle style="fill:' + color + ';" cx="100.1" cy="74.7" r="44.1"/>
  <text x="100" y="90" text-anchor="middle" style="font-size:57.2285px;fill:#FFFFFF;">12</text>
</svg>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接