更改边框高度

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

在 .box 中添加一个：定义后：

border-top-width: 50px;

https://jsfiddle.net/13uwb7kb/

Answer 2

将三角形的 border-top-width 更改为您喜欢的任何值：

.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;
    border-top-width: 50px;
 margin-left: -100px;
}

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

更改边框高度

Change border height

css

border