css - 定义 css 箭头的度数

Question

我将如何定义用 css 创建的箭头的度数如下

<div class="bubble"></div>

.bubble
{
   background: none repeat scroll 0 0 #FF7401;
   border: 3px solid silver;
   border-radius: 25px;
   bottom: 18px;
   float: right;
   height: 63px;
   margin-right: 10px;
   padding: 0;
   position: relative;
   width: 250px;
}

.bubble:after
{
  content: '';
  position: absolute;
  border-style: solid;
  border-width: 29px 16px 0;
  border-color: #ff7401 transparent;
  display: block;
  width: 0;
  z-index: 1;
  bottom: -29px;
  left: 47px;
}

.bubble:before
{
  content: '';
  position: absolute;
  border-style: solid;
  border-width: 31px 18px 0;
  border-color: silver transparent;
  display: block;
  width: 0;
  z-index: 0;
  bottom: -34px;
  left: 45px;
}

div.bubble p {
  color: #FFFFFF;
  font-size: 21px;
  font-weight: bold;
  margin-top: 10px;
  text-align: center;
}

http://jsfiddle.net/lgtsfiddler/GpUpZ/1/

我想要的是箭头的右边缘 right 应该更长并且不等于左边缘。特别是，左边缘应垂直于文本气泡，而右边缘应与它相交。为了更好地可视化，这里是我正在努力实现的示例:

Answer 1

像这样修改你的css

.bubble:before
{
content: '';
position: absolute;
border-style: solid;
border-width: 33px 18px 0;    // modify this line 
border-color: silver transparent;
/* display: block; */   // remove this line 
width: 0;
z-index: 0;
bottom: -27px;   // modify this line 
left: 50px;
-webkit-transform: rotate(-108deg) skew(11deg,-10deg);     // modify this line 
}

Demo