Geek Answers Handbook

How can I create this particular form?

Is there an easier or better way to create this particular shape / shape combination in CSS3 than what I'm doing right now? I have already tried several different things.

The triangle pointing down should sit just below the three lines, but I cannot see it there.

I want it to look like this:

enter image description here

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>
+6
source share
7 answers

I switch the border of the triangle container up and adjust 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>
+3
source

Using SVG:

You can easily create this using SVG. There is nothing complicated, and all you need is three linear elements and one path element.

  • All three line elements have two coordinates, where (x1, y1) represent the start point of the line and (x2, y2) represent the end point of the line.

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

    • M5.20 - Move to a point that 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) - (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 one element:

You can achieve the same form using one element also with CSS. Below is an example snippet for the same. The following is an explanation of how the form is achieved.

  • The main anchor tag that has the height and width of the container.
  • The :before pseudo-element, which is positioned absolutely in relation to the container and has a height of 20 pixels. The background of this element is a linear gradient that has the desired color for 2px and is transparent for the rest. The default gradients are repeated to fill your container, and so this single background image creates three lines.
  • The :after element :after again positioned absolutely in relation to the container. This pseudo-element is then rotated so that its left and lower borders create the angular parts of the triangle. Another linear gradient background creates the top line of the triangle.
  • I calculated the height and width of the :after pseudotherapy using the Pythagorean theorem. If the container is not a square, you need 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>
+2
source 
  .triangle-container { top: -35px; width: 30px; height: 40px; position: relative; border-bottom: 2px solid #e74c3c; }

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

+1
source

I updated your violin and now your form looks perfect. What I did was change border-bottom to border-top triangle-container and adjust the height and margin to align the triangle perfectly here is the fiddle - https://jsfiddle.net/s6bcjzjr/5/

+1
source 
 .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; }
0
source

Answer:

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

Look 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>
0
source

One elemental 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: ''; }
0
source

More articles:


All Articles