특수한 CSS 모양 만들기

Question

내 머리글에 특별한 CSS 모양을 만들고 싶습니다. 이 웹 사이트 http://nicolasgallagher.com/pure-css-speech-bubbles/demo/에서 첫 연설 거품처럼 보이게해야하지만 화살표는 반원이어야하고 반원은 항상 중간에 있어야합니다. 이것은 내 머리글에 해당하므로 모양이 브라우저 길이의 100 % 인 경우에도 브라우저 창의 크기를 조정할 때 원이 브라우저 중간에 있어야합니다.

그럼 제 질문은 가능한 일입니까, 그렇다면 어떻게해야합니까?

Answer 1

사용 border-radius: 50% 반 원에 대해, 다음, 원의 높이 left: 50%을 bottom 1/2을 설정 주로 중심에 놓은 다음 너비가 음수 1/2이되도록 margin-left을 입력하십시오.

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

Here's the fiddle

Answer 2

코드가 페이지에 올바르게 있습니다. 하나라는 타원형 음성 :

이

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

이