如何使用 html 和 CSS 创建“盾牌”形状 [重复]答案

【问题标题】：How to create a "shield" shape using html and CSS [duplicate]如何使用 html 和 CSS 创建“盾牌”形状 [重复]
【发布时间】：2021-09-19 07:25:50
【问题描述】：

我需要用 HTML 和 CSS 创建一个如下图所示的形状。我真的不确定如何在底部创建三角形。我目前拥有的代码是最低限度的，因为我真的不知道从哪里开始。

    .newBadge {
        flex: inherit;
        height: 130px;
        width: 130px;
        background: linear-gradient(to right, grey, lightgray, lightgray ,grey 1900px);
        /* border-radius: 5px; */
        border: 5%;
        border-color: lightgray;
        border-style: inset;
      }
    
    .background{
    /* height: auto; */
    }
    
    .year{
        flex: auto;
        width: 0; 
        height: 0; 
        border-left: 20px solid transparent;
        border-right: 20px solid transparent;
        
        border-top: 1px solid #f00;
      
    }

<div class="newBadge">

    <div class="background">

    
        <div class="company">
            _______
        </div>

        <div class="title">
            ______
        </div>

        <div class="secondaryTitle">
            ______
        </div>

        <div class="rating">
            *****
        </div>

        <div class="year">
            2021
        </div>

    </div>

</div>

Shield shaped logo

【问题讨论】：

这可能会有所帮助link
老实说，CSS 并不是解决这个问题的最佳方案。如果是为了测试，这很公平，但除此之外，您肯定总是想考虑某种图像。
clip-path 可以帮助jsfiddle.net/z0w6erm2（也可以屏蔽）
是的，它实际上是针对现实世界的问题。因此，当形状完成后，它将有多个实例，但在我涂色的地方会有不同的单词。这有意义吗？

标签： html css

【解决方案1】：

您可以将::after 伪元素与边框一起使用：

div {
  height: 200px;
  width: 300px;
  background-color: #D5D3D4;
  position: relative;
}

div:after {
  content: '';
  position: absolute;
  top: 100%;
  left: 17%;
  margin-left: -50px;
  width: 0;
  height: 0;
  border-top: solid 50px #D2D0D1;
  border-left: solid 150px transparent;
  border-right: solid 150px transparent;
}

<div>

</div>

理想情况下，我希望它薄 20% 左右

div {
  height: 200px;
  width: 240px;
  background-color: #D5D3D4;
  position: relative;
}

div:after {
  content: '';
  position: absolute;
  top: 100%;
  left: 21%;
  margin-left: -50px;
  width: 0;
  height: 0;
  border-top: solid 50px #D2D0D1;
  border-left: solid 120px transparent;
  border-right: solid 120px transparent;
}

<div>

</div>

【讨论】：

这很棒，但理想情况下我希望它薄 20% 左右。我尝试自己编辑它以实现这一目标，但没有运气。
@christianlance 我更新了我的答案，让它变薄了 20%。

【解决方案2】：

<svg width="2000" height="2000">
  <polygon points="50 50, 200 50, 200 200, 125 250, 50 200" style="fill: silver; stroke:black;" />
  
</svg>

您可以使用 svg 来制作，只需标记点，并根据需要设置样式。

【讨论】：

对，我唯一的问题是我仍然需要我标记的位置中的单词，我不确定你是否可以使用 SVG 做到这一点？
你可以在上面做一个div，位置：绝对，然后z-index：+1；然后写在上面
你会怎么写？只需添加一个 p 标签即可使单词出现在形状上方
在css中添加：p {position:absolute; z-index:+1;} 像这样：
一些文字
我添加了该代码，但它仍然出现在防护罩上方，

【解决方案3】：

使用画布并标记点。

<body>
  <canvas id="canvas" width="300" height="500"></canvas> 

  <script>
    var canvas = document.getElementById('canvas');
    if (canvas.getContext) {
        var context = canvas.getContext('2d');
        // Stroke color
        context.strokeStyle = "#000";
        context.beginPath();
        context.moveTo(50,100);
        context.lineTo(250,100);
        context.lineTo(250,300);
        // Your design
        context.stroke();
        // Fill with a color
        context.fillStyle = "#824EA8";
        context.fill();
    }
  </script>
</body>

在context.moveTo(50,100);中，50表示距离画布左侧的x值，100表示y画布顶部的值。其他人的顺序相同。

【讨论】：

【解决方案4】：

这是制作盾牌所需的 HTML + CSS：

#parent {
    width: 300px;
    height: 300px;
}
 
#shield {
    position: relative;
    width: 100%;
    height: 90%;
    background-color: green;
    border-radius: 0 0 70% 70%;
    display: inline-block;
}
#shield:before, #shield:after {
    position: absolute;
    margin-top: 50%;
    content:"";
    left: 50%;
    top: 0;
    width: 50%;
    height: 53%;
    background: green;
    border-radius: 70% 70% 0 0;
    -webkit-transform: rotate(-61.5deg);
    -moz-transform: rotate(-61.5deg);
    -ms-transform: rotate(-61.5deg);
    -o-transform: rotate(-61.5deg);
    transform: rotate(-61.5deg);
    -webkit-transform-origin: 0 100%;
    -moz-transform-origin: 0 100%;
    -ms-transform-origin: 0 100%;
    -o-transform-origin: 0 100%;
    transform-origin: 0 100%;
}
#shield:after {
    background-color: green;
    left: 0;
    -webkit-transform: rotate(61.5deg);
    -moz-transform: rotate(61.5deg);
    -ms-transform: rotate(61.5deg);
    -o-transform: rotate(61.5deg);
    transform: rotate(61.5deg);
    -webkit-transform-origin: 100% 100%;
    -moz-transform-origin: 100% 100%;
    -ms-transform-origin: 100% 100%;
    -o-transform-origin: 100% 100%;
    transform-origin :100% 100%;
}

<a href="#">
  <div id="parent">
    <div id="shield">
      
    </div>
  </div>
</a>

【讨论】：

这真是太好了；但是，我需要底部更三角形，没有圆边