CSS自定义形状

Question

我想通过CSS创建这样的东西。

只想使用CSS创建具有边框半径的自定义形状。有什么想法吗？

Answer 1

这是一个形状似乎你需要的形状，你必须用边框和变换做一些技巧，你还需要使用：after和：在选择器之前构建这种形状。

#diamond-shield {
	width: 0;
	height: 40;
	border: 50px solid transparent;
	border-bottom: 50px solid orange;
	position: relative;
	top: -10px;
    left: 250px;
    transform-origin: 0% 0%;
    transform: rotate(82deg)
}
#diamond-shield:after {
	content: '';
	position: absolute;
	left: -50px; top: 50px;
	width: 0;
	height: 0;
	border: 50px solid transparent;
	border-top: 370px solid orange;
}

#chevron {
  position: relative;
  text-align: center;
  padding: 8px;
  top: -9px;
  margin-bottom: 6px;
  left:164px;
  height: 0px;
  width: 60px;
  transform-origin: 0% 0%;
  transform: rotate(-98deg);
}

#chevron:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 51%;
  background: white;
  transform: skew(0deg, 44deg);
}
#chevron:after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 50%;
  background: white;
  transform: skew(0deg, -44deg);
}

<div id="diamond-shield"></div>
<div id="chevron"></div>

此外，您可以在此处观看一些示例：https://css-tricks.com/examples/ShapesOfCSS/