用顶部三角形为div添加边框[重复]答案

【问题标题】：Adding a border to div with top triangle [duplicate]用顶部三角形为div添加边框[重复]
【发布时间】：2016-11-10 02:24:32
【问题描述】：

我正在尝试为带有顶部三角形的 div 添加边框

问题是边框没有应用于三角形部分

body {
  background-color: #F3F5F6;
}
.info-panel {
  display: block;
  position: relative;
  background: #FFFFFF;
  padding: 15px;
  border: 1px solid #DDDDDD;
  margin-top: 20px;
}
.info-panel:after {
  content: '';
  display: block;
  position: absolute;
  left: 20px;
  bottom: 100%;
  width: 0;
  height: 0;
  border-bottom: 10px solid #FFFFFF;
  border-top: 10px solid transparent;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
}

<div class="info-panel">
  Testing
</div>

我不想添加 CSS 框阴影。

我需要一个边框。

jsFiddle

【问题讨论】：

标签： html css

【解决方案1】：

实际上“三角形部分”本身就是一个边框，这就是为什么你不能对其应用 CSS 边框的原因，但是有一个解决方法。

使用:before 伪元素创建另一个比第一个更大的三角形，并为其应用边框颜色。

.info-panel {
  display: block;
  position: relative;
  background: #FFFFFF;
  padding: 15px;
  border: 1px solid #DDDDDD;
  margin-top: 20px;
}
.info-panel:before, .info-panel:after {
  content: '';
  display: block;
  position: absolute;
  bottom: 100%;
  width: 0;
  height: 0;
}
.info-panel:before {
  left: 19px;
  border: 11px solid transparent;
  border-bottom-color: #ddd;
}
.info-panel:after {
  left: 20px;
  border: 10px solid transparent;
  border-bottom-color: #fff;
}

<div class="info-panel">
  Testing
</div>

【讨论】：

谢谢你的作品就像一个魅力。

【解决方案2】：

脱掉这个

.info-panel:after {
    border-bottom-color: #FFFFFF;
}

它覆盖了绿色边框。

检查这个sn-p

.info-panel {
  display: block;
  position: relative;
  background: #FFFFFF;
  padding: 15px;
  border: 1px solid #DDDDDD;
  margin-top: 20px;
}
.info-panel:before {
  border: 1px solid #DDDDDD;
}
.info-panel:after {
  content: '';
  display: block;
  position: absolute;
  left: 20px;
  bottom: 100%;
  width: 0;
  height: 0;
  border-bottom: 10px solid green;
  border-top: 10px solid transparent;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
}

<div class="info-panel">
  Testing
</div>

希望对你有帮助

【讨论】：

很抱歉这是我的错误，但我真正想要的是我的灰色边框像其他部分一样绕过三角形

【解决方案3】：

您可以使用 fontAwesome 来实现。查看我的示例并根据需要进行调整

.info-panel {
    	display: block;
    	position: relative;
    	background: #FFFFFF;
    	padding: 15px;
    	border:1px solid #DDDDDD;
    	margin-top:20px;
    }
   
    .info-panel:after, .info-panel:before {
    	content: '\f0d8';
      font-family: fontAwesome;
    	display: block;  
    	position: absolute;
      font-size: 36px;
    	left: 20px;
    	bottom: 100%;
      top: -22px;
    	width: 0;
    	height: 0;
      color: #ccc; /* should be your desired border color */
    
    }
    
  .info-panel:before {
    color: white;
    z-index: 2;
    top: -21px;
    }

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="info-panel">
    Testing
</div>

【讨论】：