Create div with triangle border in css

Question

I am trying to create a div with arrow on left and right. No background, only border. Something like this:

I am able to create similar div with filled background color using ::before and ::after tags. However, only borders is something i am not able to achieve. Can it be done with css only?

https://jsfiddle.net/1g16x8p7/1/

html:

<div class="wizard">
  <a class="item">
  </a>
</div>

css:

.item {
    display: inline-block;
    padding: 15px;
    padding-left: 25px;

    /*default styles*/
    background-color: green;
    position: relative;
  }  


 .item:before,
.item:after {
      content: "";
      height: 0;
      width: 0;
      border-width: 15px 0 15px  10px;
      border-style: solid;

      position: absolute;
      left: 100%;
      top: 0;
    }


.item:before {
          border-color: transparent transparent transparent white;
        left: 0;  
      }


.item:after {
        border-color: transparent transparent transparent green;  
      }

The web (HTML) is made of boxes, so no. The best you can do is a transform: skew(45deg); combining 2 divs together. You also got to think of how content will fill that irregular shape. SVG is what you want if you are going to get crazy with shapes. — zgood
– zgood, Commented Oct 31, 2017 at 16:35

delinear · Accepted Answer · 2017-10-31 16:37:33Z

6

You can use ::before and ::after with borders on two adjacent sides (e.g. top and right) and then transform: rotate and position: absolute them to create the left and right parts, e.g.

<div class="arrow"></div>

.arrow {
  height: 75px;
  width: 200px;
  border-top: 4px solid black;
  border-bottom: 4px solid black;
  position: relative;
}
.arrow::before, .arrow::after {
  content: "";
  border-top: 4px solid black;
  border-right: 4px solid black;
  height: 55px;
  width: 55px;
  position: absolute;
  transform: rotate(45deg);

}

.arrow::before {
  top: 8px;
  left: -30px;
}

.arrow::after {
  top: 8px;
  right: -30px;
}

Here's an example.

answered Oct 31, 2017 at 16:37

delinear

2,8251 gold badge12 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Gautam Kumar Over a year ago

Perfect. Thanks! :)

Collectives™ on Stack Overflow

Create div with triangle border in css

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related