CSS triangle positioning and bluntness in vertical direction only

Question

Two questions in one here, and I'm not sure if that's ok, just tell me and I'll rephrase and repost as two posts if that is better.

JSFiddle

#upTriangle{
  margin: 0px 30px 190px 30px;
  width:0px;
  height:0px;
  background-color:white;
  border-bottom:red 60px solid;
  border-right:transparent 30px solid;
  border-left:transparent 30px solid;
  border-top:transparent 60px solid;   
}

#rightTriangle{
  margin: 50px 0px 0px 0px;
  width:0px;
  height:0px;
  background-color:white;
  border-left:red 60px solid;
  border-bottom:transparent 30px solid;
  border-right:transparent 60px solid;
  border-top:transparent 30px solid; 
 }

<button type="button" id="upTriangle">
</button>

<button type="button" id="rightTriangle">
</button>

The upwardpointing triangle is blunt while the rightwardpointing isnt. The author of this guide doesnt seem to have this problem. How can I fix this? Adding height to 70px for rightTriangle makes them both equally blunt but that isnt really what I want..
I want the triangles aligned with each other so that the center of each are on the same horizontal line. I've tried fiddling around with the margins but that only makes them both move up and down. How can I fix this?

actually there is better ways to create triangle than using borders .. you can check this quesiton : https://stackoverflow.com/a/49696143/8620333 ... especially the bottom answers with SVG, clip-path and gradient solution — Temani Afif, Sep 05 '18 at 08:33
Wish I could upvote comments too. That transform solution got everything I am looking for. — Bjathr, Sep 05 '18 at 09:06
you can upvote comments but better upvote the answers you find useful ;) — Temani Afif, Sep 05 '18 at 09:09

score 0 · Accepted Answer · answered Sep 05 '18 at 08:26

Try padding:0; and making border-width consistent

     #upTriangle {
       margin: 0px 30px 190px 30px;
       width: 0px;
       height: 0px;
       background-color: white;
       border-bottom: red 60px solid;
       border-right: transparent 60px solid;
       border-left: transparent 60px solid;
       border-top: transparent 60px solid;
       padding: 0;
     }

     #rightTriangle {
       width: 0px;
       height: 0px;
       background-color: white;
       border-left: red 60px solid;
       border-bottom: transparent 60px solid;
       border-right: transparent 60px solid;
       border-top: transparent 60px solid;
       padding: 0;
     }

<!doctype HTML>


<button type="button" id="upTriangle">

</button>

<button type="button" id="rightTriangle">

</button>

Widthconsistent borders make the triangles too blunt. Padding: 0; worked though! — Bjathr, Sep 05 '18 at 08:37

CSS triangle positioning and bluntness in vertical direction only

1 Answers1