如何创建一个三角形而不是梯形的左/右边框？

Question

我想要一个左右三角形的标签，但我只能制作梯形：

.borderLeft{
  padding:0px 0px 0px 0px;
  margin:0px 0px 0px 0px;
  border-right:0.5em solid orange;
  border-top:0.5em solid transparent;
  border-bottom:0.5em solid transparent;
}
.borderRight{
  padding:0px 0px 0px 0px;
  margin:0px 0px 0px 0px;
  border-left:0.5em solid orange;
  border-top:0.5em solid transparent;
  border-bottom:0.5em solid transparent;
}

<table cellspacing="0" style="font-size:50px;">
  <tr>
    <td class="borderLeft"/>
    <td style="background-color:orange;">abcde</td>
    <td class="borderRight"/>
  </tr>
</table>

有没有办法将两边的边框从梯形改为三角形？

Answer 1

0.5em不足以创造一个三角形的形状.Becoues td的高度是2em。

.borderLeft{
  padding:0px 0px 0px 0px;
  margin:0px 0px 0px 0px;
  border-right:0.5em solid orange;
  border-top:1em solid transparent;
  border-bottom:1em solid transparent;
}
.borderRight{
  padding:0px 0px 0px 0px;
  margin:0px 0px 0px 0px;
  border-left:0.5em solid orange;
  border-top:1em solid transparent;
  border-bottom:1em solid transparent;
}

<table cellspacing="0" style="font-size:50px;">
  <tr>
    <td class="borderLeft"/>
    <td style="background-color:orange;">abcde</td>
    <td class="borderRight"/>
  </tr>
</table>

Answer 2

你可以在选择器之前和之后使用它。

检查这个答案：

＆＃13;

＆＃13;

.main {
  margin: 50px auto 0;
  width: 200px;
  height: 40px;
  position: relative;
  background: red;
  text-align: center;
  color: white;
  line-height: 40px;
  /* to vertical align text */
}

.main:before {
  content: "";
  position: absolute;
  right: -20px;
  bottom: 0;
  width: 0;
  height: 0;
  border-left: 20px solid red;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
}

.main:after {
  content: "";
  position: absolute;
  left: -40px;
  bottom: 0;
  width: 20px;
  height: 0;
  border-left: 20px solid red;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  transform: rotate(180deg);
}

＆＃13;

<div class="main">ABCDE</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

试试这个：

＆＃13;

＆＃13;

.borderLeft {
  padding: 0px 0px 0px 0px;
  margin: 0px 0px 0px 0px;
  border-right: 0.5em solid orange;
  border-top: 0.5em solid transparent;
  border-bottom: 0.5em solid transparent;
}

.borderRight {
  padding: 0px 0px 0px 0px;
  margin: 0px 0px 0px 0px;
  border-left: 0.5em solid orange;
  border-top: 0.5em solid transparent;
  border-bottom: 0.5em solid transparent;
}

＆＃13;

<table cellspacing="0" style="font-size:50px;">
  <tr>
    <td class="borderLeft" />
    <td style="background-color:orange;line-height:0">abcde</td>
    <td class="borderRight" />
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;

您只需要为第二个td将line-height设置为0。将CSS移动到CSS文件而不是内联。

Answer 4

使用linear-gradient，您可以使用一个元素实现此目标，并且它会响应：

.box {
  padding:10px 40px;
  margin:5px;
  display:inline-block;
  background:
   linear-gradient(to top right,orange 50%,transparent 50.5%) top right/40px 50%,
   linear-gradient(to bottom right,orange 50%,transparent 50.5%) bottom right/40px 50%,
   linear-gradient(to bottom left,orange 50%,transparent 50.5%) bottom left/40px 50%,
   linear-gradient(to top left,orange 50%,transparent 50.5%) top left/40px 50%,
   linear-gradient(orange,orange) center/calc(100% - 80px) 100%;
   
  background-repeat:no-repeat;
}

<div class="box">some text</div>
<div class="box">loooooooooooooooog text</div>
<div class="box">two line <br> text</div>
<div class="box">three<br> line <br> text</div>

Answer 5

你可以做一个指向https://css-tricks.com/snippets/css/css-triangle/的CSS技巧。这是带标签的示例（您可以更改边距和字体大小以匹配您的文字）

＆＃13;

＆＃13;

.arrow-up {
  width: 0; 
  height: 0; 
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  
  border-bottom: 80px solid orange;
}
.arrow-up > div {
 position:absolute;
 margin-top:30px;
 margin-left:-30px;
 font-size: 40px;
}

＆＃13;

<div class="arrow-up"><div >test</div></div>

＆＃13;

＆＃13;

＆＃13;