如何为（8 点星形）css 形状添加边框？

Question

如何在这个 8 点星形之外添加红色边框？或者有没有人知道一个简单的 svg 解决方案？

是： 需要：

HTML

<div id="star8"></div>

CSS

#star8 {
 border: 3px solid red;
 background: blue; width: 80px;
 height: 80px;
 position: relative;
 -webkit-transform: rotate(20deg);
 -moz-transform: rotate(20deg);
 -ms-transform: rotate(20deg);
 -o-transform: rotate(20eg);
 }
#star8:before {
 content: "";
 position: absolute;
 top: 0;
 left: 0;
 height: 80px;
 width: 80px;
 background: blue;
 -webkit-transform: rotate(135deg);
 -moz-transform: rotate(135deg);
 -ms-transform: rotate(135deg);
 -o-transform: rotate(135deg);
 }

Answer 1

你可以使用mix-blend-mode and eventually the other pseudo : DEMO

#star8:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 80px;
  width: 80px;
  transform: rotate(135deg);
  box-shadow: 0 0 0 3px red;::* a border works too */
  mix-blend-mode:overlay;
}

#star8 {
  margin: 2em;
  border: 3px solid red;
  background: blue;
  width: 80px;
  height: 80px;
  position: relative;
  transform: rotate(20deg);
}

#star8:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 80px;
  width: 80px;
  background: blue;
  transform: rotate(135deg);
}

#star8:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 80px;
  width: 80px;
  transform: rotate(135deg);
  box-shadow: 0 0 0 3px red;
  mix-blend-mode:overlay;
}

<div id="star8"></div>

没有 mix-blend-mode 但 z-index 和 :after

#star8 {
  margin: 2em;
  border: 3px solid red;
  background: blue;
  width: 80px;
  height: 80px;
  position: relative;
  transform: rotate(20deg);
}

#star8:before {
  content: "";
  position: absolute;
  z-index:-1;
  top: 0;
  left: 0;
  height: 80px;
  width: 80px;
  background: blue;
  transform: rotate(135deg);
  box-shadow: 0 0 0 3px red;
}

#star8:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 80px;
  width: 80px;
  background: blue;
  transform: rotate(0deg);
}

<div id="star8"></div>

您也可以只绘制 bg 的一部分 (via linear-gradient) 以隐藏不需要的边框部分并在其中添加一些文本：http://codepen.io/gc-nomade/pen/KWNmqw

Answer 2

div 看起来像现在这样的原因是你实际上没有一个 8 角星，你有 2 个正方形相互叠加。

第一步是将大纲添加到 :before 伪 class。二是添加一个没有轮廓的:after伪class，旋转到与原div相同的位置，覆盖原div重叠:before绘制的轮廓。

演示：https://jsfiddle.net/hj1eh6md/

和CSS：

#star8 {
 border: 3px solid red;
 background: olive; 
 width: 80px;
 height: 80px;
 position: relative;
 -webkit-transform: rotate(20deg);
 -moz-transform: rotate(20deg);
 -ms-transform: rotate(20deg);
 -o-transform: rotate(20eg);
}
#star8:before {
 border: 3px solid red;
 content: "";
 position: absolute;
 top: 0;
 left: 0;
 height: 80px;
 width: 80px;
 background: olive;
 -webkit-transform: rotate(135deg);
 -moz-transform: rotate(135deg);
 -ms-transform: rotate(135deg);
 -o-transform: rotate(135deg);
}
#star8:after{
 content: "";
 position: absolute;
 top: 0;
 left: 0;
 height: 80px;
 width: 80px;
 background: olive;
}

Answer 3

只需在 :after 中覆盖另一个矩形，覆盖红色边框。 http://codepen.io/anon/pen/qbrQZa

#star8:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 80px;
  width: 80px;
  background: blue;
}

您还应该将 #star8:before 的尺寸设为 77x77 以使其适合。

Answer 4

SVG 解决方案

这可以使用单个 svg 路径创建。添加轮廓可以通过在路径

中添加笔划属性来完成

<svg viewBox="-1 -1 50 50" width="200px">
  <path d="M 35,40 30,48 21,42 11,44 9,34 0,30 6,20 4,10 14,8 20,0 28,5 38,3 l 1,10 8,5 -5,8 2,10z" stroke="red" stroke-linejoin="bevel" fill="black" />
</svg>

如何为（8 点星形）css 形状添加边框？

How do I add a border to an (8 point star) css shape?

html

css

css-shapes

SVG 解决方案