How to create a "shield" shape using html and CSS

Question

I need to create a shape like the one pictured below in just HTML and CSS. I am really not sure how to create the triangular shape at the bottom. The code I currently have is bare minimum because I am really not sure where to start.

    .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

this might help [link](https://www.w3schools.com/graphics/svg_polygon.asp) — Hamid, Jul 08 '21 at 20:32
Honestly, CSS is not the best solution for this problem. If it's for a test, fair enough, but otherwise you'll always certainly want to consider an image of sorts. — Obsidian Age, Jul 08 '21 at 20:35
clip-path can help https://jsfiddle.net/z0w6erm2/ (mask too) — G-Cyrillus, Jul 08 '21 at 20:58
Yeah, it is actually for real world problem. So when the shape is done, it is going to have multiple instances and but have different words where I have colored out. Does that make sense? — christian lance, Jul 08 '21 at 21:06

Spectric · Answer 1 · 2021-07-08T21:54:16.007

You can use the ::after pseudo-element along with borders:

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>

ideally I would like it to be about 20% thinner

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>

This is awesome, but ideally I would like it to be about 20% thinner. I tried editing it myself to achieve that, but had no luck. — christian lance, Jul 08 '21 at 21:20
@christianlance I've updated my answer to make it 20% thinner. — Spectric, Jul 08 '21 at 21:54

score 0 · Answer 2 · answered Jul 08 '21 at 20:36

Here is the HTML + CSS required to make a shield:

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

This is really nice; however, I would need the bottom to be more triangular with no rounded edges — christian lance, Jul 08 '21 at 21:21

score 0 · Answer 3 · answered Jul 08 '21 at 20:52

Use a canvas and mark the points.

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

In context.moveTo(50,100); 50 indicates x value from the left side of the canvas and 100 indicates y value from the top side of the canvas. Same order for others.

ongoing_thought · Answer 4 · 2021-07-08T21:22:44.223

0

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

You can make it with svg, just mark the points, and style it like You want.

edited Jul 08 '21 at 21:22

answered Jul 08 '21 at 21:14

ongoing_thought

1
1

right, my only issue is I still need the words in the spots I had marked out and I;m not sure if you can do that with SVG? – christian lance Jul 08 '21 at 21:22
you can make a div on it, with position:absolute, then z-index:+1; and then write on it – ongoing_thought Jul 08 '21 at 21:25
How would you write on it? Just adding a p tag makes the word appear above the shape – christian lance Jul 08 '21 at 21:30
add in css: p {position:absolute; z-index:+1;} like this:
Some text
– ongoing_thought Jul 08 '21 at 22:01
I added that code and it is still appearing far above the shield, – christian lance Jul 09 '21 at 13:26
Some text
like this? and still above? – ongoing_thought Jul 09 '21 at 14:16
Ah, that worked much better! Is there a way to do linear gradient background like in the picture? – christian lance Jul 09 '21 at 14:30
sure, you can try this one and play with it:

Some text

– ongoing_thought Jul 09 '21 at 16:46

How to create a "shield" shape using html and CSS

4 Answers4