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/

我想要的是箭头的右边缘应该更长并且不等于左边缘。特别是，左边缘应垂直于文本气泡，而右边缘应与之相接。为了更好的可视化，这里是我想要实现的一个例子：

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 
}

演示

Answer 2

箭头的形状和方向由各个边框的宽度和颜色决定

单个值的简单调整使实验变得容易。写出宽度和颜色的各个值通常也很有用，所以看看是什么。

JSfiddle 演示

CSS

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

.bubble:after {
    content: '';
    position: absolute;
    border-style: solid;
    display: block;
    width: 0;
    z-index: 1;
    top:100%;
    left: 47px;
}

.bubble.one:after { /* straight left side */
    border-width: 29px 29px 29px 0;
    border-color: #ff7401 transparent transparent transparent; 
}


.bubble.two:after { /* straight right side */
    border-width: 29px 0px 29px 29px;
    border-color: #ff7401 transparent transparent transparent ; 
}