CSS 自定义形状

Question

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

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

Answer 1

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

#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/

CSS 自定义形状

CSS custom shape

html

css

css-shapes