Html 接近三角形 我用两个边框来制作这个三角形，我想在三角形的倾斜边上有一个像下面的框一样的边框。（边框底部：6px双黑；边框右侧：6px双黑；）。最大的困难在于它是一个轻微的不透明。

>

---

.title{
宽度：300px；
高度：0px；
边框底部：50px实心#F2F2；
右边框：50px实心透明；
不透明度：.8；
位置：绝对位置；
利润率：47px062px；
}
#媒体{
利润率：97px062px；
位置：绝对位置；
高度：100px；
背景色：#F2F2；
不透明度：.8；
宽度：350px；
z指数：2；
底边：6px双黑；
右边框：6px双黑；
}

---

我可以给你两个解决方案。第一个（html+css）和第二个（html+css+svg）。

---

首先有以下缺点：

一个边界

非响应性设计

必须仅使用实心填充背景

颜色和尺寸设置不灵活

HTML

<div class="figure">some text</div>

---

秒

HTML+SVG

正文{
背景图像：url（“http://www.favewallpapers.com/pic/201409/2560x1600/favewallpapers.com-6863.jpg");
背景附件：固定；
背景位置：中心；
背景尺寸：封面；
}

SVG
image/svg+xml

要使其不透明度，请使用：

背景：rbga（0,0255,7）或<代码>不透明度：.7//使用rgb值来匹配您想要的颜色。您能提供您的代码吗~我认为最好的解决方法是使用svg。即使是旋转或这种棘手的方法：无法填充它~所以只需使用svg即可
        * {
            font-size: 0;
            margin: 0;
            padding: 0;
        }

        body {
            background-color: #5FC3B9;
        }

        /* The main figure */
        .figure {
            display: block;
            position: relative;
            margin: 100px auto;
            padding: 12px;
            opacity: .8;
            width: 356px;
            height: 131px;
            font: 16px/24px sans-serif;
            background-color: #eee;
            color: black;
            border-bottom: 2px solid #333;
            border-right: 2px solid #333;
        }

        /* Triangles - grey and white */
        .figure:after,
        .figure:before {
            display: inline-block;
            position: absolute;
            top:0;
            right: 0;
            border-left: 51px solid transparent;
            border-top: 51px solid #333;
            content: '';
            z-index: 100;
        }

        /* Styling for second triangle [WHITE] */

        .figure:before {
            border-left: 50px solid transparent;
            border-top: 50px solid transparent;
            border-top-color: #5FC3B9;
            right: -2px;
            z-index: 200;
        }