css中边框带三角怎么做 |css如何让文本框可以拖动

.box {
position: relative;
border: 1px solid #ccc;
padding: 10px;
}
.box:after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
margin-left: -10px;
border: 10px solid transparent;
border-top-color: #ccc;
}

首先，大家在HTML中定义一个带有边框的容器，为了让三角形出现在容器的底部，需要给容器设置position: relative属性，并在容器的伪元素中设置position: absolute属性。

利用伪元素:after，大家可以在容器的底部创建一个三角形。大家设置三角形的位置为在容器底部，且水平方向居中。为了让三角形朝上，大家只需将其上面的三边都设置为透明，而下面一条边设置为与容器边框一致的颜色即可。

通过调整三角形的大小（border-width），大家可以控制三角形的形状和大小。如果需要在右边或左边添加三角形，只需要修改left或right属性的值即可。

总之，利用CSS中的伪元素和边框属性，可以轻松地创建带有三角形的边框效果，让大家的UI设计更加丰富多彩。