如何在css中设计tringle边框？

Question

使用Html5，css3，Bootstrap我想像这样设计这个div

我对css很新。所以请帮帮我这样做？

Answer 1

检查此代码段

.box {
    width:300px;
    position: relative;
    background: #fff;
    height:100px;
    top:50px;
    border: 4px solid #000;
}
.box:after, .box:before {
    bottom: 100%;
    left: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.box:after {
    border-color: rgba(136, 183, 213, 0);
    border-bottom-color: #fff;
    border-width: 20px;
    margin-left: -20px;
}
.box:before {
    border-color: rgba(194, 225, 245, 0);
    border-bottom-color: #000;
    border-width: 26px;
    margin-left: -26px;
}

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

Answer 2

我已根据您的更新要求修改了@Hitesh Misro的答案。

＆＃13;

＆＃13;

.box {
    width:300px;
    position: relative;
    background: #fff;
    height:100px;
    top:50px;
    border: 4px solid #000;
}
.box:after, .box:before {
    bottom: 100%;
    left: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.box:after {
    border-color: rgba(136, 183, 213, 0);
    border-bottom-color: #fff;
    border-width: 20px;
    margin-left: -20px;
}
.box:before {
    border-color: rgba(194, 225, 245, 0);
    border-bottom-color: #000;
    border-width: 26px;
    margin-left: -26px;
}

.box span
{
  display:block;
  position:relative;
  width:100%;
  height:30px;
  top:25px;
  text-align:center;
  border-top: 5px solid #000;
  border-bottom: 5px solid #000;
  padding-top: 10px;
}

＆＃13;

<div class="box">
  <span>Hello this is some text</span>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

我们可以使用html5和css3。

＆＃13;

＆＃13;

set.seed(44)
A <- runif(n = 1e6)
B <- seq(0,1,by = 1e-3)
system.time(A2<-sapply(A, function(x) B[B>=x][1]))
#   user  system elapsed 
# 18.058   0.000  15.606
system.time(A3<-B[findInterval(A,B)+1])  
#   user  system elapsed 
#   0.00    0.00    0.07
identical(A2,A3)
#[1] TRUE

＆＃13;

.arrow_box {
	position: relative;
	background: #88b7d5;
	border: 2px solid #c2e1f5;
	top:20px;
	width:400px;
    }
    .arrow_box p{margin:10px; padding:10px;}
    .arrow_box:after, .arrow_box:before {
	bottom: 100%;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
    }

    .arrow_box:after {
	border-color: rgba(136, 183, 213, 0);
	border-bottom-color: #88b7d5;
	border-width: 30px;
	margin-left: -30px;
    }
    .arrow_box:before {
	border-color: rgba(194, 225, 245, 0);
	border-bottom-color: #c2e1f5;
	border-width: 33px;
	margin-left: -33px;
    }

＆＃13;

＆＃13;

＆＃13;

Answer 4

.boxDiv {
    	position: relative;
    	background: #ffffff;
    	border: 4px solid #c2e1f5;
        top: 50px;
        min-height:100px;
    }
    .boxDiv:after, .boxDiv:before {
    	bottom: 100%;
    	left: 50%;
    	border: solid transparent;
    	content: " ";
    	height: 0;
    	width: 0;
    	position: absolute;
    	pointer-events: none;
    }
    .boxDiv:after {
    	border-color: rgba(255, 255, 255, 0);
    	border-bottom-color: #ffffff;
    	border-width: 30px;
    	margin-left: -30px;
    }
    .boxDiv:before {
    	border-color: rgba(194, 225, 245, 0);
    	border-bottom-color: #c2e1f5;
    	border-width: 36px;
    	margin-left: -36px;
    }

<div class="boxDiv">Contents</div>