CSS如何将边框也添加到三角形？ [复制]答案

【问题标题】：CSS how can I add border also to triangle? [duplicate]CSS如何将边框也添加到三角形？ [复制]
【发布时间】：2014-11-12 16:53:47
【问题描述】：

在我的情况下，我有以下内容：

http://jsfiddle.net/pyx3zx25/12/

问题是如何将边框也添加到三角形。

我的 CSS：

.slide{
    position: relative;
    padding: 15px;    
}        
.arrow {
    max-width: 300px;
    background-color: #E01616;
    position: absolute;
    top: -10px;
    left: -10px;
    margin: 5px 0 0 5px;
    border: 3px solid black;
}
.arrow:after {
    left: 100%;
    bottom: 0px;
    content: "";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-width: 15px;
    border-bottom: 30px solid #E01616;
    border-right: 30px solid transparent;
}

【问题讨论】：

有几种方法。您可以使用另一个伪 (:before) 并将其定位在略低于 :after 或使用 transform 将 div 旋转 45 度。我想已经有一些类似的问题了。

标签： html css css-shapes

【解决方案1】：

使用:before 伪元素只需稍作调整即可创建一个类似三角形，让您的:after 元素看起来像有边框：

.slide{
    position: relative;
    padding: 15px;    
}        
.arrow {
    max-width: 300px;
    background-color: #E01616;
    position: absolute;
    top: -10px;
    left: -10px;
    margin: 5px 0 0 5px;
    border: 3px solid black;
}
.arrow:after {
    left: 100%;
    bottom: 0px;
    content: "";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-width: 15px;
    border-bottom: 30px solid #E01616;
    border-right: 30px solid transparent;
}

.arrow:before {
    left: 100%;
    bottom: -3px;
    content: "";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-width: 15px;
    border-bottom: 37px solid #000;
    border-right: 37px solid transparent;
}

<div class="slide">
    <div class="arrow">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer scelerisque ex eget ultricies blandit.</p>
    </div>
</div>

【讨论】：

谢谢：我现在明白了，还有什么方法可以让边框有点透明吗？
当然，您可以使用rgba()。 IE：rgba(0, 0, 0, 0.5) 是半透明的黑色。

【解决方案2】：

您不能使用边框，因为您已经使用了它。

试试看。 UPDTATE

.arrow:before{
     border-bottom: 40px solid #000;
    border-right: 37px solid transparent;
    border-width: 0 37px 40px 0;
    bottom: 0;
    content: "";
    left: 100%;
    position: absolute;
    top: 55px;

}

【讨论】：

【解决方案3】：

jsfiddle - jsfiddle

HTML

 <div class="slide">
    <div class="arrow">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer scelerisque ex eget ultricies blandit.</p>
    </div>
 </div>

CSS

.slide{
    position: relative;
    padding: 15px;    
}        
.arrow {
    max-width: 300px;
    background-color: #E01616;
    position: absolute;
    top: -10px;
    left: -10px;
    margin: 5px 0 0 5px;
    border: 3px solid black;
}
.arrow:after {
    left: 100%;
    bottom: 0px;
    content: "";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-width: 15px;
    border-bottom: 30px solid #E01616;
    border-right: 30px solid transparent;
    box-shadow: 0px 3px 0px 0px #000;
}
.arrow:before{
   content: "";
    right: -30px;
    bottom: 0px;
    height: 3px;
    width: 30px;
    position: absolute;
    background: #000;
    pointer-events: none;
    transform: rotate(45deg) translate(-8px,-11px) scale(1.45);  
}

【讨论】：