Home / Questions / 7241
Accepted
Christopher Tavara
Asked: 2020-04-08 10:03:59 +0800 CST 2020-04-08 10:03:59 +0800 CST

如何为 div 制作斜切边框样式？

  • 772

你好朋友，我希望你能帮助我，我想用一个包含文本的切边来设置 div 的样式，输入 google，我正在尝试，但我做不到。我把链接留给你看。这是一项谷歌在线调查：http: //goo.gl/forms/7cQEZDxNAo

附上图片。 在此处输入图像描述

css

3 Answers

  1. 正如 Carlos 在他的评论中所说，如果您查看代码，您会发现他们使用带有多边形的 SVG 来实现它（从您共享的链接中复制）：

    .freebirdMaterialHeaderbannerSectionTriangle>polygon {
    stroke-width: 1;
}
.freebirdSolidFill {
    fill: rgb(219, 68, 55);
    stroke: rgb(219, 68, 55);
}
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 10 10" preserveAspectRatio="none" class="freebirdMaterialHeaderbannerSectionTriangle">
  <polygon class="freebirdSolidFill" points="0,0 10,0 0,10"></polygon>
</svg>

    图像适应容器的高度，然后看起来不错。

    如果您想仅使用 CSS 而不使用 SVG（因为已标记问题），您可以使用边框（尽管此解决方案有点hacky并且并不总是看起来不错，因为它不允许太多配置） ：

    div {
  height:30px;
  line-height:30px;
  background:red;
  display:inline-block;
  position:relative;
}

div:after {
  content:"";
  position:absolute;
  right:-30px;
  width: 0; 
  height: 0; 
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  border-top: 30px solid #f00;
  z-index:-1;
}
    <div>Título de la Sección</div>

    • 1
  2. Best Answer

    如果您使用浏览器的开发人员工具（通过 F12 访问），则可以检查 html。

    这样你就可以分析标签的使用svg和polygon

    .freebirdMaterialHeaderbannerSectionTriangleContainer {
    flex-shrink: 0;
    overflow: hidden;
    position: relative;
    width: 18px;
}


.freebirdSolidFill {
    fill: #DB4437;
    stroke: #DB4437;
}
    <div class="freebirdMaterialHeaderbannerSectionTriangleContainer">

   <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 10 10" preserveAspectRatio="none" class="freebirdMaterialHeaderbannerSectionTriangle"> 
  
        <polygon class="freebirdSolidFill" points="0,0 10,0 0,10"></polygon>
  
   </svg>
</div>

    • 0

  3. 也许我回答得太晚了，也许您已经知道该怎么做，但是，我认为它可能对某人有用。它适用于那些不知道并正在寻找如何轻松做到这一点的人。

    要制作这样的剪切 div，您只需要这样的东西：

    #DivCortado{
   border-bottom: 40px solid transparent; /*Los 40px modifican lo alto.*/
   border-left: 16px solid red; /*Los 16px modifican lo ancho del triangulo y red obviamente sera el color que tendrá.*/
}
    <div id="DivCortado"> </div>

    一个普通的矩形 div 包含所有生命的文本，甚至 divCut 放在一边。

    • 0