相关疑难解决方法(0)

我正在尝试创建有角度的标签以位于内容部分之上,并且遇到了这个很好的例子:

HTML:

<div class="tab">
    <div class="arrow"></div>
</div>

CSS:

body
{
    background-color: #666;    
}
.tab
{
    height: 50px;
    width: 150px;
    border-radius: 10px 10px 0px 0px;
    background-color: #FFF;
    position: relative;
}

.arrow
{
  border-color: transparent transparent #FFF #FFF;
  border-style: solid;
  border-width: 23px 23px 23px 23px;
  height:0;
  width:0;
  position:absolute;
  bottom:0px;
  right:-43px;
}

http://jsfiddle.net/P3P3Z/2/

但是,我想为这个形状设置一个不同的2px边框颜色,不幸的是这个方法不起作用,因为它使用边框来创建形状的右侧.

关于如何修改它的任何想法？

我只是想知道是否有办法制作类似形状边框的标签？更清楚地说，我将以星号绘制形状。我的意思是这种边框形状。

*********************
***********************
*************************
***************************
***************************
***************************
***************************
***************************

为此，如何在CSS中切除矩形的右上角？还是最理想的方法是什么？

我已经包含了一张图片,因为我无法用文字描述它.但基本上我希望以最好的方式实现这种形式的"标签".

我知道之前有过这方面的问题,使用一些新的css3技巧将片段旋转到位,但我从来没有见过这样的东西.在目前呈现蓝绿色的背后,最有可能出现图像.红线代表页面上的内容.

我过去使用.png文件中的那个小弯曲位完成了这个,但我讨厌这样做.

我也见过这个:

如何使用css制作这样的斜角标签？

但这并不是我想要的,但如果有类似的解决方案,我会对此持开放态度.我还需要一种方法div来继续屏幕的最右边缘,同时仍然保持标签的左侧部分固定到位.

来自@ chipChocolate.py的解决方案

我使用芯片的解决方案,但我交换了它,以便选项卡是svg元素:

<svg viewBox="0 0 960 70" preserveAspectRatio="none">
    <path fill="#008882" d="M0,61c0,0,141,0,215.5,0C294,61,358,0.3,423.5,0.3c35,0,536.5,0,536.5,0v69.5H0V61z"/>
</svg>

交换颜色,以便您可以在这里看到它.