Html 使用css和'创建矩形；三角形边'；

我正在尝试用css创建一个容器，它有一个带有“三角形边”的矩形标题

例如：

或此处的代码（css）：

html:

试验baa
sadsad dsdsa dsdsa dsadsd

sadsad dsdsa dsdsa dsadsd

sadsad dsdsa dsdsa dsadsd

sadsad dsdsa dsdsa dsadsd

但是右边的边界因为白色背景而消失。有没有办法防止这种情况

---

感谢您的帮助

用这种方法创建一个三角形是无法完成你想要做的事情的，因为根据定义，你在用一个矩形块挡住一块矩形块，而这个矩形块后面还有其他东西

实现您想要实现的目标的方法是使用边框创建一个三角形。这里有一个链接和一把小提琴，可以帮助您实现这一点：

http://jsfiddle.net/BNVHU/7/

---

不幸的是，此时边界渐变只适用于webkit，并且似乎与制作三角形的边界方法不一致。我怀疑是否有一种方法可以在所有浏览器中保持渐变不变。可能需要图像。

谢谢您的帮助。边界渐变太糟糕了。我现在会用一个图像来修复它。

.bubble {
    clear: both;
    margin: 0px auto;
    width: 350px;
    background: #fff;
    -moz-border-radius: 10px;
  -khtml-border-radius: 10px;
  -webkit-border-radius: 10px;
    -moz-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
  -khtml-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
  -webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);  
    position: relative; 
    z-index: 90; /* the stack order: displayed under ribbon rectangle (100) */
}

div#container {
    margin: 50px auto 0px auto; /* centered */
    padding-top:100px;
    width: 400px;
}

.triangle {
   height: 35px;
   top: -20px;
   width: 315px;
   position: relative;
   background: #D12738;
   background: -moz-linear-gradient(top, rgba(209, 39, 56, 1) 0%, rgba(122, 23, 38, 1)    100%);
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(209, 39, 56, 1)), color-stop(100%,rgba(122, 23, 38, 1)));
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d12738',  endColorstr='#7a1726',GradientType=0 ), filter:  progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
}

.triangle::after {
   -moz-transform: rotate(45deg);
   -ms-transform: rotate(45deg);
   -webkit-transform: rotate(35deg);
   -o-transform: rotate(45deg);
   background: none repeat scroll 0 0 white;
   content: "";
   height: 44px;
   left: 302px;
   position: absolute;
   top: 2px;
   width: 24px;
}

<div id="container">
    <div class="bubble">
        <div class="triangle">test baa</div>
        <p>sadsadsadsad dsdsa dsdsa ds dsadsd</p>
        <p>sadsadsadsad dsdsa dsdsa ds dsadsd</p>
        <p>sadsadsadsad dsdsa dsdsa ds dsadsd</p>
        <p>sadsadsadsad dsdsa dsdsa ds dsadsd</p>

    </div>
</div>