改变边界高度

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>