更改邊框高度

Question

我有一個與三角形後邊界的div，但我想要減少三角形的高度。 jsfiddle

<div class="box"> 
    <div class="content"></div> 
</div> 

.box { 
    width: 200px; 
    height: 120px; 
    position: relative; 
    background-color: #88b7d5; 
} 
.box:after { 
    top: 100%; 
    left: 50%; 
    border: solid transparent; 
    content: " "; 
    height: 0; 
    width: 0; 
    position: absolute; 
    border-color: rgba(136, 183, 213, 0); 
    border-top-color: #88b7a1; 
    border-width: 100px; 
    margin-left: -100px; 
} 

Answer 1

變化border-top-width到你喜歡的任何值：

.box { 
 
    width: 200px; 
 
    height: 120px; 
 
    position: relative; 
 
    background-color: #88b7d5; 
 
} 
 
.box:after { 
 
\t top: 100%; 
 
\t left: 50%; 
 
\t border: solid transparent; 
 
\t content: " "; 
 
\t height: 0; 
 
\t width: 0; 
 
\t position: absolute; 
 
\t border-color: rgba(136, 183, 213, 0); 
 
\t border-top-color: #88b7a1; 
 
\t border-width: 100px; 
 
    border-top-width: 50px; 
 
\t margin-left: -100px; 
 
}

<div class="box"> 
 
    <div class="content"></div> 
 
</div>

Answer 2

一本添加到.box的：定義後：三角形的

border-top-width: 50px; 

https://jsfiddle.net/13uwb7kb/