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 ; 
}