用CSS創建形狀

在我的website我想製作一個語音氣泡，並找到一個很好的教程。但我想做一些改變，但我不知道如何去做。基本上我想水平翻轉這個小三角，所以它的垂直在右側而不是左側。這裏是CSS：用CSS創建形狀

.bubble 
{ 
    margin-top: 100px; 
    position: relative; 
    width: 200px; 
    height: 100px; 
    text-align: center; 
    line-height: 100px; 
    background-color: #fff; 
    border: 8px solid #666; 
    -webkit-border-radius: 30px; 
    -moz-border-radius: 30px; 
    border-radius: 30px; 
    -webkit-box-shadow: 2px 2px 4px #888; 
    -moz-box-shadow: 2px 2px 4px #888; 
    box-shadow: 2px 2px 4px #888; 
} 


.bubble:after 
{ 
    content: ' '; 
    position: absolute; 
    width: 0; 
    height: 0; 
    left: 38px; 
    top: 100px; 
    border: 15px solid; 
    border-color: #fff transparent transparent #fff; 
}

來源

2013-01-05 McKeene

看到我的答案，讓我知道，如果我落後了一些，其中所引用。因爲我覺得我有點混淆理解你的問題。 – w3uiguru

有關更多形狀，請檢查此 http://css-tricks.com/examples/ShapesOfCSS/ –

可能的重複[Speech with bubble]（http://stackoverflow.com/questions/30299093/speech-bubble-with - ） – jbutler483

Here是一個jsFiddle來顯示它的工作。從Pure CSS Bubbles

CSS

.bubble { 
    margin-top: 100px; 
    position: relative; 
    width: 200px; 
    height: 100px; 
    text-align: center; 
    line-height: 100px; 
    background-color: orange; 
    -webkit-border-radius: 30px; 
    -moz-border-radius: 30px; 
    border-radius: 30px; 
} 

.bubble:after { 
    content:""; 
    position:absolute; 
    bottom:-20px; 
    left:50px; 
    border-width:20px 0 0 20px; 
    border-style:solid; 
    border-color: orange transparent; 
    display:block; 
    width:0; 
}

HTML

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

來源

2013-01-05 04:40:03

感謝這工作偉大aswell :) – McKeene

試試下面的CSS：

.bubble:after { 
    -moz-border-bottom-colors: none; 
    -moz-border-image: none; 
    -moz-border-left-colors: none; 
    -moz-border-right-colors: none; 
    -moz-border-top-colors: none; 
    border-color: orange orange transparent transparent; // See here i change the color 
    border-style: solid; 
    border-width: 15px; 
    content: " "; 
    height: 0; 
    position: absolute; 
    right: 38px; // see here for position 
    top: 100px; 
    width: 0; 
} 

.bubble:before { 
    border: 25px solid; 
    content: " "; 
    height: 0; 
    position: absolute; 
    right: 30px; // see here for position 
    top: 100px; 
    width: 0; 
}

來源

2013-01-05 04:36:02 w3uiguru

謝謝你的工作很好。但我似乎看不出是什麼造成了不同？ – McKeene

看到我更新的答案與評論的解釋。 – w3uiguru

現在我通過翻轉元素固定它。有沒有另一種方法可以做到這一點？

-moz-transform: scaleX(-1); 
-o-transform: scaleX(-1); 
-webkit-transform: scaleX(-1); 
transform: scaleX(-1);

來源

2013-01-05 04:36:27 McKeene

在這種情況下不需要轉換，因爲在css代碼中使用一些tweeking很容易。看到我的答案一次。 – w3uiguru

也看到我的答案，也不需要變換。 :) –

用CSS創建形狀

回答

相關問題