Html 围绕div的边框，底部有一个三角形点

有没有办法在CSS中实现这个边界？我有一个DIV，上面有一系列的要点，我需要像图片一样用边框把它包起来

试试这个：

 .down-arrow {
    display: inline-block;
    position: relative;
    background: darkcyan;
    padding: 15px 0;
    width: 200px;
    text-align: center;
}
.down-arrow:after {
    content: '';
    display: block;  
    position: absolute;
    left: 0;
    top: 100%;
    width: 0;
    height: 0;
    border-top: 20px solid darkcyan;
    border-right: 100px solid transparent;
    border-bottom: 0 solid transparent;
    border-left: 100px solid transparent;
}

试试这个：

 .down-arrow {
    display: inline-block;
    position: relative;
    background: darkcyan;
    padding: 15px 0;
    width: 200px;
    text-align: center;
}
.down-arrow:after {
    content: '';
    display: block;  
    position: absolute;
    left: 0;
    top: 100%;
    width: 0;
    height: 0;
    border-top: 20px solid darkcyan;
    border-right: 100px solid transparent;
    border-bottom: 0 solid transparent;
    border-left: 100px solid transparent;
}

看看这个

基本上将此css添加到div：

#base {
  background: red;
  display: inline-block;
  height: 55px;
  margin-left: 20px;
  margin-top: 55px;
  position: relative;
  width: 100px;
}

#base:after {
  border-bottom: 35px solid red;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  content: "";
  height: 0;
  left: 0;
  position: absolute;
  top: 54px;
  width: 0;
  -ms-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}

看看这个

基本上将此css添加到div：

#base {
  background: red;
  display: inline-block;
  height: 55px;
  margin-left: 20px;
  margin-top: 55px;
  position: relative;
  width: 100px;
}

#base:after {
  border-bottom: 35px solid red;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  content: "";
  height: 0;
  left: 0;
  position: absolute;
  top: 54px;
  width: 0;
  -ms-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}

---

您可以首先创建一个具有边框的元素，除了底部的

边框

，然后使用

：before

和

：after

伪元素在底部添加三角形边框

div{
宽度：200px；
高度：150像素；
边框：1px纯黑；
边框底部：无；
位置：相对位置；
背景：白色；
利润率：20px；
}
div:after，div:before{
内容：''；
宽度：0；
身高：0；
边框样式：实心；
边框宽度：50px 101px 0 101px；
边框颜色：黑色透明；
最高：100%；
左：-1px；
位置：绝对位置；
}
部门：之后{
边框颜色：白色透明；
顶部：计算值（100%-1px）；
}

---

您可以先创建一个元素，除了底部的

边框外，还可以使用
：before
和
：after
伪元素在底部添加三角形边框


div{
宽度：200px；
高度：150像素；
边框：1px纯黑；
边框底部：无；
位置：相对位置；
背景：白色；
利润率：20px；
}
div:after，div:before{
内容：''；
宽度：0；
身高：0；
边框样式：实心；
边框宽度：50px 101px 0 101px；
边框颜色：黑色透明；
最高：100%；
左：-1px；
位置：绝对位置；
}
部门：之后{
边框颜色：白色透明；
顶部：计算值（100%-1px）；
}
以下是该框的代码：


.box{
背景：#fff；
边框：1px实心#000；
显示：内联块；
高度：55px；
左边距：20px；
边缘顶部：55px；
位置：相对位置；
宽度：100px；
}
.盒子：之后{
边框顶部：35px实心#fff；
左边框：50px实心透明；
右边框：50px实心透明；
内容：''；
身高：0；
左：0；
位置：绝对位置；
顶部：55px；
宽度：0；
}
.盒子：以前{
边框顶部：35px实心#000；
左边框：50px实心透明；
右边框：50px实心透明；
内容：''；
身高：0；
左：0；
位置：绝对位置；
顶部：56px；
宽度：0；
}
以下是该框的代码：


.box{
背景：#fff；
边框：1px实心#000；
显示：内联块；
高度：55px；
左边距：20px；
边缘顶部：55px；
位置：相对位置；
宽度：100px；
}
.盒子：之后{
边框顶部：35px实心#fff；
左边框：50px实心透明；
右边框：50px实心透明；
内容：''；
身高：0；
左：0；
位置：绝对位置；
顶部：55px；
宽度：0；
}
.盒子：以前{
边框顶部：35px实心#000；
左边框：50px实心透明；
右边框：50px实心透明；
内容：''；
身高：0；
左：0；
位置：绝对位置；
顶部：56px；
宽度：0；
}

你的试用码在哪里？请在这个Stackoverflow问题中引用这个答案。请检查我的答案。你的试用码在哪里？请在这个Stackoverflow问题中引用这个答案。请检查我的答案。这与Stackoverflow问题中的另一个答案相同。请检查我的demo@Nayana_dast这与Stackoverflow中的另一个答案相同问题请查看我的演示@Nayana_Das