0

ヘッダー用に特別なCSSシェイプを作成したいと思います。このウェブサイトhttp://nicolasgallagher.com/pure-css-speech-bubbles/demo/の最初の吹き出しのように見える必要がありますが、矢印は半円である必要があり、半円は常に真ん中。これは私のヘッダー用なので、形状がブラウザーの長さの100％であっても、ブラウザーウィンドウのサイズを変更するときも、円はブラウザーの中央に留まる必要があります。

だから私の質問は、それは可能ですか、もしそうなら、どのようにですか？

4

2 に答える 2

1

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

これがフィドルです

于 2012-10-26T18:14:49.307 に答える
0

コードはページ上にあります。楕円形のスピーチと呼ばれるもの：

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);
}
于 2012-10-26T16:36:56.893 に答える