我想爲我的標題創建一個特殊的CSS形狀。必須看起來像這個網站上的第一個講話泡泡http://nicolasgallagher.com/pure-css-speech-bubbles/demo/,但箭頭必須是半圈,而半圈必須始終位於中間。這是用於我的標題,所以即使形狀是瀏覽器長度的100%,該圓也必須留在瀏覽器的中間,當我調整瀏覽器窗口的大小時也是如此。創建特殊的CSS形狀
所以我的問題是,這是可能的,如果是這樣,如何?
我想爲我的標題創建一個特殊的CSS形狀。必須看起來像這個網站上的第一個講話泡泡http://nicolasgallagher.com/pure-css-speech-bubbles/demo/,但箭頭必須是半圈,而半圈必須始終位於中間。這是用於我的標題,所以即使形狀是瀏覽器長度的100%,該圓也必須留在瀏覽器的中間,當我調整瀏覽器窗口的大小時也是如此。創建特殊的CSS形狀
所以我的問題是,這是可能的,如果是這樣,如何?
使用border-radius: 50%
爲半圈,然後將bottom
1/2圓的高度,left: 50%
以大部分爲中心,然後margin-left
變爲負1/2的寬度:
.half-circle {
background: orange;
padding: 1em;
position: relative;
text-align: center;
}
.half-circle::after {
background: orange;
border-radius: 50%;
bottom: -10px;
content: '';
display: block;
height: 20px;
left: 50%;
margin-left: -10px;
position: absolute;
width: 20px;
}
該代碼正確的頁面上。一個叫橢圓演講:
HTML:
<div class="oval-speech">test</div>
CSS
.oval-speech {
position:relative;
width:270px;
padding:50px 40px;
margin:1em auto 50px;
text-align:center;
color:#fff;
background:#5a8f00;
/* css3 */
background:-webkit-gradient(linear, 0 0, 0 100%, from(#b8db29), to(#5a8f00));
background:-moz-linear-gradient(#b8db29, #5a8f00);
background:-o-linear-gradient(#b8db29, #5a8f00);
background:linear-gradient(#b8db29, #5a8f00);
/*
NOTES:
-webkit-border-radius:220px 120px; // produces oval in safari 4 and chrome 4
-webkit-border-radius:220px/120px; // produces oval in chrome 4 (again!) but not supported in safari 4
Not correct application of the current spec, therefore, using longhand to avoid future problems with webkit corrects this
-webkit-border-top-left-radius:220px 120px;
-webkit-border-top-right-radius:220px 120px;
-webkit-border-bottom-right-radius:220px 120px;
-webkit-border-bottom-left-radius:220px 120px;
-moz-border-radius:220px/120px;
border-radius:220px/120px;*/
}
.oval-speech p {font-size:1.25em;}
/* creates part of the curve */
.oval-speech:before {
content:"";
position:absolute;
z-index:-1;
bottom:-30px;
right:50%;
height:30px;
border-right:60px solid #5a8f00;
background:#5a8f00; /* need this for webkit - bug in handling of border-radius */
/* css3 */
-webkit-border-bottom-right-radius:80px 50px;
-moz-border-radius-bottomright:80px 50px;
border-bottom-right-radius:80px 50px;
/* using translate to avoid undesired appearance in CSS2.1-capabable but CSS3-incapable browsers */
-webkit-transform:translate(0, -2px);
-moz-transform:translate(0, -2px);
-ms-transform:translate(0, -2px);
-o-transform:translate(0, -2px);
transform:translate(0, -2px);
}
/* creates part of the curved pointy bit */
.oval-speech:after {
content:"";
position:absolute;
z-index:-1;
bottom:-30px;
right:50%;
width:60px;
height:30px;
background:#fff;
/* css3 */
-webkit-border-bottom-right-radius:40px 50px;
-moz-border-radius-bottomright:40px 50px;
border-bottom-right-radius:40px 50px;
/* using translate to avoid undesired appearance in CSS2.1-capabable but CSS3-incapable browsers */
-webkit-transform:translate(-30px, -2px);
-moz-transform:translate(-30px, -2px);
-ms-transform:translate(-30px, -2px);
-o-transform:translate(-30px, -2px);
transform:translate(-30px, -2px);
}
謝謝!但我需要在底部而不是三角形的一個半圈;) – Mario
我改變了我的答案,但你可能只是看了一個來源。我只是複製並粘貼了他們在您提供的頁面中使用的內容。 – coopersita
謝謝!但這也是錯誤的,只有小箭頭應該是半圈而不是整個泡泡!而不是箭頭上的箭頭,它必須是一個半圓。謝謝:) – Mario
這樣的事情? http://jsfiddle.net/f5r9W/ –
首先我想說謝謝!但你忘了底部的半圈而不是箭頭;) – Mario