How can I create this particular shape?

Question

Is there an easier or better way to create this particular shape/combination of shapes in CSS3 than what am I currently doing? I have tried a few different things already.

The downward facing triangle should be sitting just below the three lines, but I can't seem to get it there.

I want it to look like this:

https://jsfiddle.net/s6bcjzjr/

.triangle-container {
  top: 0;
  width: 30px;
  height: 40px;
  position: relative;
  border-bottom: 2px solid #e74c3c;
}
.triangle {
  position: relative;
  margin: auto;
  top: 30px;
  left: 0;
  right: 0;
  width: 21px;
  height: 21px;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  border-right: 2px solid #e74c3c;
  border-bottom: 2px solid #e74c3c;
}
.line {
  width: 30px;
  position: relative;
  border-bottom: 2px solid #e74c3c;
  margin-top: 3px;
}

<a href="#" class="open">
    <div class="line"></div>
    <div class="line"></div>
    <div class="line"></div>
    <div class="triangle-container">
        <div class="triangle"></div>
    </div>
</a>

Answer 1

Using SVG:

You can create this easily using SVG. There is nothing complex and all that you would need is three line elements and one path element.

• All three line elements have two co-ordinates where (x1,y1) represent the starting point of the line and (x2,y2) represent the ending point of the line.

• The path element takes a path (d) and it value can be interpreted as follows:

  • M5,20 - Move to the point which is 5px to the right of the container and 20px down.
  • L95,20 - Draw a line from the previous point (5,20) to (95,20).
  • L50,45 - Draw a line from the previous point (95,20) to (50,45).
  • z - Close the path. That is, draw a line connecting the point (50,45) and the starting point.

svg {
  height: 100px;
  width: 50px;
}
line,
path {
  stroke: #e74c3c;
  stroke-width: 2;
}
path {
  fill: none;
  stroke-linejoin: bevel;
}

<svg viewBox='0 0 100 100' preserveAspectRatio='none'>
  <g id='graphic'>
    <line x1='5' y1='5' x2='95' y2='5' />
    <line x1='5' y1='10' x2='95' y2='10' />
    <line x1='5' y1='15' x2='95' y2='15' />
    <path d='M5,20 L95,20 L50,45z' />
  </g>
</svg>

---

Using CSS with single element:

You can achieve the same shape using a single element also with CSS. Below is a sample snippet for the same. Below is an explanation of how the shape is achieved.

• The parent anchor tag which has the height and width of the container.
• The :before pseudo-element which is positioned absolutely with respect to the container and is 20px tall. The background of this element is a linear-gradient which has the required color for 2px and is transparent for the remaining part. Gradients by default repeat to fill its container and so this single background pattern produces the three lines.
• The :after element is again positioned absolutely with respect to the container. This pseudo-element is then rotated such that its left and bottom borders produce angled parts of the triangle. Another linear-gradient background produces the top line of the triangle.
• I have calculated height and width of the :after pseudo using Pythagoras theorem. If container is not a square then you have to manually calculate the values.

a {
  position: relative;
  display: inline-block;
  height: 50px;
  width: 50px;
}
a:before {
  position: absolute;
  content: '';
  top: 3px;
  left: 0px;
  height: 20px;
  width: 100%;
  background: linear-gradient(to bottom, #e74c3c 2px, transparent 2px);
  background-size: 100% 5px;
}
a:after {
  position: absolute;
  content: '';
  top: 50%;
  left: 50%;
  height: calc(50px / 1.414);
  width: calc(50px / 1.414);
  border-bottom: 2px solid #e74c3c;
  border-left: 2px solid #e74c3c;
  transform: translateX(-50%) translateY(-50%) rotate(-45deg);
  background: linear-gradient(to top right, transparent 46%, #e74c3c 46%, #e74c3c 50%, transparent 50%);
}

<a href='#'></a>

Answer 2

.triangle-container {
top: 0px;
width: 30px;
height: 1px;
position: relative;
border-top: 2px solid #e74c3c;
margin-top: 3px;
}

.triangle {
position: absolute;
margin: auto;
top: -12px;
left: 0;
right: 0;
width: 21px;
height: 21px;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
border-right: 2px solid #e74c3c;
border-bottom: 2px solid #e74c3c;
}

.line {
width: 30px;
position: relative;
border-bottom: 2px solid #e74c3c;
margin-top: 3px;
}

Answer 3

A one element method using before and after (fiddle):

<a href="#" class="open down-arrow"></a>

.down-arrow {
    display: inline-block;
    position: relative;
    width: 30px;
    height: 14px;
    border-top: 2px solid #e74c3c;
    border-bottom: 2px solid #e74c3c;
}

.down-arrow::before {
    display: block;
    position: absolute;
    top: 3px;
    right: 0;
    left: 0;
    height: 3px;
    border-top: 2px solid #e74c3c;
    border-bottom: 2px solid #e74c3c;
    content: '';
}

.down-arrow::after {
    display: block;
    position: relative;
    top: 4px;
    left: 0;
    right: 0;
    width: 21px;
    height: 21px;
    margin: 0 auto;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    border-right: 2px solid #e74c3c;
    border-bottom: 2px solid #e74c3c;
    content: '';
}

Answer 4

The answer is:

.triangle-container {
  top: -36px;
}

---

See it here:

.triangle-container {
  top: -36px;
  width: 30px;
  height: 40px;
  position: relative;
  border-bottom: 2px solid #e74c3c;
}
.triangle {
  position: relative;
  margin: auto;
  top: 30px;
  left: 0;
  right: 0;
  width: 21px;
  height: 21px;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  border-right: 2px solid #e74c3c;
  border-bottom: 2px solid #e74c3c;
}
.line {
  width: 30px;
  position: relative;
  border-bottom: 2px solid #e74c3c;
  margin-top: 3px;
}

<a href="#" class="open">
    <div class="line"></div>
    <div class="line"></div>
    <div class="line"></div>
    <div class="triangle-container">
        <div class="triangle"></div>
    </div>
</a>

Answer 5

i've updated your fiddle and now your shape looks perfect. What I did is changed the border-bottom to border-top of the triangle-container, and adjusted height and margin to align the triangle perfectly
here is the fiddle - https://jsfiddle.net/s6bcjzjr/5/

Answer 6

 .triangle-container {
    top: -35px;
    width: 30px;
    height: 40px;
    position: relative;
    border-bottom: 2px solid #e74c3c;
}

https://jsfiddle.net/s6bcjzjr/6/

Answer 7

I switch the triangle container's border to top and adjusted the margins

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.triangle-container {
  top: 0;
  width: 30px;
  height: 40px;
  position: relative;
  border-top: 2px solid #e74c3c;
  margin-top: 3px;
}
.triangle {
  position: relative;
  margin: auto;
  top: -10.5px;
  left: 0;
  right: 0;
  width: 21px;
  height: 21px;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  border-right: 2px solid #e74c3c;
  border-bottom: 2px solid #e74c3c;
}
.line {
  width: 30px;
  position: relative;
  border-bottom: 2px solid #e74c3c;
  margin: 3px 0 0 0;
}

<a href="#" class="open">
  <div class="line"></div>
  <div class="line"></div>
  <div class="line"></div>
  <div class="triangle-container">
    <div class="triangle"></div>
  </div>
</a>