用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创建形状

回答

相关问题