带有条纹背景和顶部三角形切口的形状

Question

您好，我需要在 CSS/HTML5 中塑造形状。我将它粘贴为图像，但现在我需要制作这样的形状。

有什么办法吗？我用三角形做了一些东西，但它看起来一点都不接近这个。

形状：

这是我的CSS。

#flag {
  width: 110px;
  height: 56px;
  padding-top: 15px;
  position: relative; 
  background: red;
  color: white;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-align: center;
  text-transform: uppercase;
    float:left;
}
#flag:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  border-top: 25px solid #eee;
  border-left: 55px solid transparent;
  border-right: 55px solid transparent;
}

HTML:

<div id="flag"></div><span>SOME TEXT HERE</span>

JS FIDDLE

Answer 1

您可以使用以下两个选项之一实现此目的。

选项 1： 使用 box-shadow 和一个额外的伪元素。

在此选项中，添加了一个大小为 20px 的额外伪元素（white/grey 颜色）并使用适当定位的框阴影，实现了条纹图案。如果标志元素的尺寸是固定的，则此方法很有用。

#flag {
  width: 110px;
  height: 56px;
  padding-top: 15px;
  position: relative;
  background: red;
  color: white;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-align: center;
  text-transform: uppercase;
  float: left;
  overflow: hidden;
}
#flag:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  border-top: 25px solid #eee;
  border-left: 55px solid transparent;
  border-right: 55px solid transparent;
}
#flag:after {
  content: "";
  position: absolute;
  top: 0px;
  left: -30px;
  height: 10px;
  width: 150px;
  background: #eee;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  transform: rotate(-45deg);
  box-shadow: -20px 60px 0px #eee, -20px 80px 0px #eee, -20px 20px 0px #eee, -20px -20px 0px #eee, 0px 40px 0px #eee;
}

<div id="flag"></div><span>SOME TEXT HERE</span>

选项 2：使用线性渐变

在这种方法中，条纹是使用线性渐变作为背景在伪元素上获得的，伪元素旋转 45 度以实现对角线条纹效果。由于线性渐变百分比的使用，即使尺寸不固定也可以使用此选项。

div{
    height: 100px;
    width: 100px;
    position: relative;
    overflow: hidden;
}
div:before{
    content: '';
    position: absolute;
    background: -webkit-linear-gradient(90deg, red 50%, #eee 50%);
    background: -moz-linear-gradient(0deg, red 50%, #eee 50%);
    background: linear-gradient(0deg, red 50%, #eee 50%);
    background-size: 100% 20px;
    top: 0px;
    left: 0px;
    height: 150%;
    width: 150%;
    -webkit-transform-origin: 15% 60%;
    -moz-transform-origin: 15% 60%;
    transform-origin: 15% 60%;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
div:after{
    content: '';
    position: absolute;
    background: #eee;
    top: -25%;
    left: 25%;
    height: 50%;
    width: 50%;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
}

<div></div>

注意： 在第二个示例中，我放置了顶部三角形，使其仍然在两侧留下一些 space 仅作为示例。这个 fiddle 的顶部三角形覆盖了旗帜的整个宽度。

Answer 2

您可以为此使用 css 渐变，以及单个伪元素：

div{
  position:relative;
  height:300px;
  width:300px;
  background: rgb(255,255,255); /* Old browsers */
background: -moz-linear-gradient(-45deg,  rgba(255,255,255,1) 0%, rgba(255,255,255,1) 15%, rgba(0,0,0,1) 15%, rgba(255,255,255,1) 15%, rgba(0,0,0,1) 16%, rgba(0,0,0,1) 16%, rgba(0,0,0,1) 20%, rgba(0,0,0,1) 20%, rgba(255,255,255,1) 21%, rgba(255,255,255,1) 35%, rgba(0,0,0,1) 35%, rgba(0,0,0,1) 40%, rgba(255,255,255,1) 41%, rgba(255,255,255,1) 55%, rgba(0,0,0,1) 55%, rgba(0,0,0,1) 60%, rgba(255,255,255,1) 61%, rgba(255,255,255,1) 75%, rgba(255,255,255,1) 75%, rgba(0,0,0,1) 76%, rgba(0,0,0,1) 80%, rgba(255,255,255,1) 81%, rgba(255,255,255,1) 95%, rgba(0,0,0,1) 96%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(15%,rgba(255,255,255,1)), color-stop(15%,rgba(0,0,0,1)), color-stop(15%,rgba(255,255,255,1)), color-stop(16%,rgba(0,0,0,1)), color-stop(16%,rgba(0,0,0,1)), color-stop(20%,rgba(0,0,0,1)), color-stop(20%,rgba(0,0,0,1)), color-stop(21%,rgba(255,255,255,1)), color-stop(35%,rgba(255,255,255,1)), color-stop(35%,rgba(0,0,0,1)), color-stop(40%,rgba(0,0,0,1)), color-stop(41%,rgba(255,255,255,1)), color-stop(55%,rgba(255,255,255,1)), color-stop(55%,rgba(0,0,0,1)), color-stop(60%,rgba(0,0,0,1)), color-stop(61%,rgba(255,255,255,1)), color-stop(75%,rgba(255,255,255,1)), color-stop(75%,rgba(255,255,255,1)), color-stop(76%,rgba(0,0,0,1)), color-stop(80%,rgba(0,0,0,1)), color-stop(81%,rgba(255,255,255,1)), color-stop(95%,rgba(255,255,255,1)), color-stop(96%,rgba(0,0,0,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg,  rgba(255,255,255,1) 0%,rgba(255,255,255,1) 15%,rgba(0,0,0,1) 15%,rgba(255,255,255,1) 15%,rgba(0,0,0,1) 16%,rgba(0,0,0,1) 16%,rgba(0,0,0,1) 20%,rgba(0,0,0,1) 20%,rgba(255,255,255,1) 21%,rgba(255,255,255,1) 35%,rgba(0,0,0,1) 35%,rgba(0,0,0,1) 40%,rgba(255,255,255,1) 41%,rgba(255,255,255,1) 55%,rgba(0,0,0,1) 55%,rgba(0,0,0,1) 60%,rgba(255,255,255,1) 61%,rgba(255,255,255,1) 75%,rgba(255,255,255,1) 75%,rgba(0,0,0,1) 76%,rgba(0,0,0,1) 80%,rgba(255,255,255,1) 81%,rgba(255,255,255,1) 95%,rgba(0,0,0,1) 96%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg,  rgba(255,255,255,1) 0%,rgba(255,255,255,1) 15%,rgba(0,0,0,1) 15%,rgba(255,255,255,1) 15%,rgba(0,0,0,1) 16%,rgba(0,0,0,1) 16%,rgba(0,0,0,1) 20%,rgba(0,0,0,1) 20%,rgba(255,255,255,1) 21%,rgba(255,255,255,1) 35%,rgba(0,0,0,1) 35%,rgba(0,0,0,1) 40%,rgba(255,255,255,1) 41%,rgba(255,255,255,1) 55%,rgba(0,0,0,1) 55%,rgba(0,0,0,1) 60%,rgba(255,255,255,1) 61%,rgba(255,255,255,1) 75%,rgba(255,255,255,1) 75%,rgba(0,0,0,1) 76%,rgba(0,0,0,1) 80%,rgba(255,255,255,1) 81%,rgba(255,255,255,1) 95%,rgba(0,0,0,1) 96%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg,  rgba(255,255,255,1) 0%,rgba(255,255,255,1) 15%,rgba(0,0,0,1) 15%,rgba(255,255,255,1) 15%,rgba(0,0,0,1) 16%,rgba(0,0,0,1) 16%,rgba(0,0,0,1) 20%,rgba(0,0,0,1) 20%,rgba(255,255,255,1) 21%,rgba(255,255,255,1) 35%,rgba(0,0,0,1) 35%,rgba(0,0,0,1) 40%,rgba(255,255,255,1) 41%,rgba(255,255,255,1) 55%,rgba(0,0,0,1) 55%,rgba(0,0,0,1) 60%,rgba(255,255,255,1) 61%,rgba(255,255,255,1) 75%,rgba(255,255,255,1) 75%,rgba(0,0,0,1) 76%,rgba(0,0,0,1) 80%,rgba(255,255,255,1) 81%,rgba(255,255,255,1) 95%,rgba(0,0,0,1) 96%); /* IE10+ */
background: linear-gradient(135deg,  rgba(255,255,255,1) 0%,rgba(255,255,255,1) 15%,rgba(0,0,0,1) 15%,rgba(255,255,255,1) 15%,rgba(0,0,0,1) 16%,rgba(0,0,0,1) 16%,rgba(0,0,0,1) 20%,rgba(0,0,0,1) 20%,rgba(255,255,255,1) 21%,rgba(255,255,255,1) 35%,rgba(0,0,0,1) 35%,rgba(0,0,0,1) 40%,rgba(255,255,255,1) 41%,rgba(255,255,255,1) 55%,rgba(0,0,0,1) 55%,rgba(0,0,0,1) 60%,rgba(255,255,255,1) 61%,rgba(255,255,255,1) 75%,rgba(255,255,255,1) 75%,rgba(0,0,0,1) 76%,rgba(0,0,0,1) 80%,rgba(255,255,255,1) 81%,rgba(255,255,255,1) 95%,rgba(0,0,0,1) 96%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

  }
div:before{
  content:"";
position:absolute;
  border-top:150px solid white;
  border-left:150px solid transparent;
  border-right:150px solid transparent;
  top:0;

<div></div>

创建上半部分的方法略有不同也可以（我猜）：

div {
  position: relative;
  overflow: hidden;
  height: 200px;
  width: 200px;
  background: rgb(255, 255, 255);
  /* Old browsers */
  background: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 15%, rgba(0, 0, 0, 1) 15%, rgba(255, 255, 255, 1) 15%, rgba(0, 0, 0, 1) 16%, rgba(0, 0, 0, 1) 16%, rgba(0, 0, 0, 1) 20%, rgba(0, 0, 0, 1) 20%, rgba(255, 255, 255, 1) 21%, rgba(255, 255, 255, 1) 35%, rgba(0, 0, 0, 1) 35%, rgba(0, 0, 0, 1) 40%, rgba(255, 255, 255, 1) 41%, rgba(255, 255, 255, 1) 55%, rgba(0, 0, 0, 1) 55%, rgba(0, 0, 0, 1) 60%, rgba(255, 255, 255, 1) 61%, rgba(255, 255, 255, 1) 75%, rgba(255, 255, 255, 1) 75%, rgba(0, 0, 0, 1) 76%, rgba(0, 0, 0, 1) 80%, rgba(255, 255, 255, 1) 81%, rgba(255, 255, 255, 1) 95%, rgba(0, 0, 0, 1) 96%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, rgba(255, 255, 255, 1)), color-stop(15%, rgba(255, 255, 255, 1)), color-stop(15%, rgba(0, 0, 0, 1)), color-stop(15%, rgba(255, 255, 255, 1)), color-stop(16%, rgba(0, 0, 0, 1)), color-stop(16%, rgba(0, 0, 0, 1)), color-stop(20%, rgba(0, 0, 0, 1)), color-stop(20%, rgba(0, 0, 0, 1)), color-stop(21%, rgba(255, 255, 255, 1)), color-stop(35%, rgba(255, 255, 255, 1)), color-stop(35%, rgba(0, 0, 0, 1)), color-stop(40%, rgba(0, 0, 0, 1)), color-stop(41%, rgba(255, 255, 255, 1)), color-stop(55%, rgba(255, 255, 255, 1)), color-stop(55%, rgba(0, 0, 0, 1)), color-stop(60%, rgba(0, 0, 0, 1)), color-stop(61%, rgba(255, 255, 255, 1)), color-stop(75%, rgba(255, 255, 255, 1)), color-stop(75%, rgba(255, 255, 255, 1)), color-stop(76%, rgba(0, 0, 0, 1)), color-stop(80%, rgba(0, 0, 0, 1)), color-stop(81%, rgba(255, 255, 255, 1)), color-stop(95%, rgba(255, 255, 255, 1)), color-stop(96%, rgba(0, 0, 0, 1)));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 15%, rgba(0, 0, 0, 1) 15%, rgba(255, 255, 255, 1) 15%, rgba(0, 0, 0, 1) 16%, rgba(0, 0, 0, 1) 16%, rgba(0, 0, 0, 1) 20%, rgba(0, 0, 0, 1) 20%, rgba(255, 255, 255, 1) 21%, rgba(255, 255, 255, 1) 35%, rgba(0, 0, 0, 1) 35%, rgba(0, 0, 0, 1) 40%, rgba(255, 255, 255, 1) 41%, rgba(255, 255, 255, 1) 55%, rgba(0, 0, 0, 1) 55%, rgba(0, 0, 0, 1) 60%, rgba(255, 255, 255, 1) 61%, rgba(255, 255, 255, 1) 75%, rgba(255, 255, 255, 1) 75%, rgba(0, 0, 0, 1) 76%, rgba(0, 0, 0, 1) 80%, rgba(255, 255, 255, 1) 81%, rgba(255, 255, 255, 1) 95%, rgba(0, 0, 0, 1) 96%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(-45deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 15%, rgba(0, 0, 0, 1) 15%, rgba(255, 255, 255, 1) 15%, rgba(0, 0, 0, 1) 16%, rgba(0, 0, 0, 1) 16%, rgba(0, 0, 0, 1) 20%, rgba(0, 0, 0, 1) 20%, rgba(255, 255, 255, 1) 21%, rgba(255, 255, 255, 1) 35%, rgba(0, 0, 0, 1) 35%, rgba(0, 0, 0, 1) 40%, rgba(255, 255, 255, 1) 41%, rgba(255, 255, 255, 1) 55%, rgba(0, 0, 0, 1) 55%, rgba(0, 0, 0, 1) 60%, rgba(255, 255, 255, 1) 61%, rgba(255, 255, 255, 1) 75%, rgba(255, 255, 255, 1) 75%, rgba(0, 0, 0, 1) 76%, rgba(0, 0, 0, 1) 80%, rgba(255, 255, 255, 1) 81%, rgba(255, 255, 255, 1) 95%, rgba(0, 0, 0, 1) 96%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 15%, rgba(0, 0, 0, 1) 15%, rgba(255, 255, 255, 1) 15%, rgba(0, 0, 0, 1) 16%, rgba(0, 0, 0, 1) 16%, rgba(0, 0, 0, 1) 20%, rgba(0, 0, 0, 1) 20%, rgba(255, 255, 255, 1) 21%, rgba(255, 255, 255, 1) 35%, rgba(0, 0, 0, 1) 35%, rgba(0, 0, 0, 1) 40%, rgba(255, 255, 255, 1) 41%, rgba(255, 255, 255, 1) 55%, rgba(0, 0, 0, 1) 55%, rgba(0, 0, 0, 1) 60%, rgba(255, 255, 255, 1) 61%, rgba(255, 255, 255, 1) 75%, rgba(255, 255, 255, 1) 75%, rgba(0, 0, 0, 1) 76%, rgba(0, 0, 0, 1) 80%, rgba(255, 255, 255, 1) 81%, rgba(255, 255, 255, 1) 95%, rgba(0, 0, 0, 1) 96%);
  /* IE10+ */
  background: linear-gradient(135deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 15%, rgba(0, 0, 0, 1) 15%, rgba(255, 255, 255, 1) 15%, rgba(0, 0, 0, 1) 16%, rgba(0, 0, 0, 1) 16%, rgba(0, 0, 0, 1) 20%, rgba(0, 0, 0, 1) 20%, rgba(255, 255, 255, 1) 21%, rgba(255, 255, 255, 1) 35%, rgba(0, 0, 0, 1) 35%, rgba(0, 0, 0, 1) 40%, rgba(255, 255, 255, 1) 41%, rgba(255, 255, 255, 1) 55%, rgba(0, 0, 0, 1) 55%, rgba(0, 0, 0, 1) 60%, rgba(255, 255, 255, 1) 61%, rgba(255, 255, 255, 1) 75%, rgba(255, 255, 255, 1) 75%, rgba(0, 0, 0, 1) 76%, rgba(0, 0, 0, 1) 80%, rgba(255, 255, 255, 1) 81%, rgba(255, 255, 255, 1) 95%, rgba(0, 0, 0, 1) 96%);
  /* W3C */
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#000000', GradientType=1);
  /* IE6-9 fallback on horizontal gradient */
}
div:before {
  content: "";
  position: absolute;
  height: 70%;
  width: 70%;
  -webkit-transform-origin: top left;
  -moz-transform-origin: top left;
  transform-origin: top left;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  transform: rotate(-45deg);
  background: white;
  top: 0;

<div></div>

有用的资源： Gradient editor

带有条纹背景和顶部三角形切口的形状

Shape with striped background and a triangular cut on top

html

css

shape

css-shapes