Inverted triangular corners on banner (CSS)

Question

I'm trying to get inverted sides on my banner as shown in the attached screenshots. I have a rectangle at the moment and would like corners like in the 2nd picture. This is the current code:

.shop-sale-banner {
  background-color: #00509D;
  position: relative;
  margin: auto;
  width: 50%;
}

Thanks!

If you make a search for css shapes ( for example) you can find a lot of tutorials — Sfili_81, Jun 28 '21 at 12:52

score 2 · Accepted Answer · answered Jun 28 '21 at 13:12

2

you can create pseudo-element with borders that looks like desired shape

.shop-sale-banner {
  position: relative;
  margin: auto;
  width: 50%;
  text-align: center;
  color: #fff;
  height: 2em;
  line-height: 2em;
}
.shop-sale-banner:before{
  content:"";
  position: absolute;
  top: 0;
  z-index: -1;
  left: 0;
  right: 0;
  border-style: solid;
  border-width: 1em 0.4em 1em 0.4em;
  border-color: #00509D transparent #00509D transparent;
  height: 0;
}

<div class="shop-sale-banner">Shop Sale</div>

answered Jun 28 '21 at 13:12

Pepo_rasta

2,842
12
20

Thanks, I'm working on Shopify so I think there is pre-written code blocking this from working but I'm playing around with it now. – boscode Jun 28 '21 at 14:01
@boscode check what is messing with your code. If it is just som pre-defined style, you can override it with higher priority styles – Pepo_rasta Jun 28 '21 at 14:09
Yes, that's what I did. Just needed to change bits here and there from the examples people gave and override some predefined classes. – boscode Jun 29 '21 at 13:03

score 1 · Answer 2 · answered Jun 28 '21 at 13:15

Try this code here:

      body {
        margin: 0;
        padding: 0;
        font-family: Verdana, sans-serif;
      }
      .container {
        display: flex;
        justify-content: center;
        margin-top: 40px;
      }
      .banner {
        background-color: blue;
        color: white;
        width: 600px;
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .banner span {
        font-size: 2rem;
      }
      .left-triangle {
        width: 0px;
        height: 0px;
        border: 30px solid blue;
        border-left: 20px solid white;
        transform: translateX(20px);
      }
      .right-triangle {
        width: 0px;
        height: 0px;
        border: 30px solid blue;
        border-right: 20px solid white;
        transform: translateX(-20px);
      }

<html>
  <body>
    <div class="container">
      <div class="left-triangle"></div>
      <div class="banner">
        <span>Shop Sales</span>
      </div>
      <div class="right-triangle"></div>
    </div>
  </body>
</html>

The trick to get your triangles is to create divs with zero width and height, but with borders.

Thanks for the help, I took bits from this and adjusted to my site. Looks good now. — boscode, Jun 29 '21 at 13:04

Inverted triangular corners on banner (CSS)

2 Answers2