如何在css中设计三角形边框？ [关闭]答案

【问题标题】：How to design tringle border in css? [closed]如何在css中设计三角形边框？ [关闭]
【发布时间】：2017-01-14 23:59:12
【问题描述】：

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

我对 CSS 很陌生。所以请帮我这样做？

【问题讨论】：

希望您至少尝试自己编写代码。 Stack Overflow 不是代码编写服务。我建议你做一些additional research，无论是通过谷歌还是通过搜索，尝试一下。如果您仍然遇到问题，请返回您的代码并解释您尝试过的方法以及为什么它不起作用。

标签： html css twitter-bootstrap bootstrap-modal

【解决方案1】：

检查这个sn-p

.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;
}

&lt;div class="box"&gt;&lt;/div&gt;

【讨论】：

【解决方案2】：

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

.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;
}

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

【讨论】：

【解决方案3】：

我们可以通过使用 html5 和 css3 来做到这一点。

.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;
    }

<div class="arrow_box">
  <p>  Text Area</p>
</div>

【讨论】：

【解决方案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>

【讨论】：