Question

这里有两个问题，我不确定是否可以，请告诉我，如果更好，我将改写为两个帖子。

#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>

向上指向的三角形变钝，而向右指向的三角形则变钝。 this guide的作者似乎没有这个问题。我怎样才能解决这个问题？为rightTriangle增加70px的高度会使它们两个都变钝，但这并不是我想要的。.
我希望三角形彼此对齐，以使每个三角形的中心在同一水平线上。我尝试摆弄边距，但这只会使它们上下移动。我该如何解决？

Answer 1

尝试填充：0；并使边框宽度保持一致

     #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>

CSS三角形仅在垂直方向上定位和钝化

1 个答案: