0

純粋に CSS でシェイプを作成しました。次のリンクには私の作品が含まれています。

http://jsfiddle.net/kaHek/119/

CSS:

#applicationStatus {
position: relative;
width: 630px;
height: 140px;
top: 20px;
left: 40px; }

ul.applicationStatus {
list-style: none; }

li.applicationStatus, li.applicationStatusGood, li.applicationStatusNoGood {
height: 140px;
background-color: #767676;
display: inline-block;
/* Dirty IE Hack */
zoom: 1;
*display: inline;
margin-right: 30px;
padding: 10px;
color: white;
font-size: 18px;
text-align: center;
line-height: 150px;
/*      vertical-align: middle; */ }
li.applicationStatus:after, li.applicationStatusGood:after, li.applicationStatusNoGood:after {
content: "";
position: absolute;
width: 0;
height: 0;
border-top: 80px solid transparent;
border-left: 30px solid #77a942;
border-bottom: 80px solid transparent;
margin: -10px 90px 0 0px; }

HTML

<div id="applicationStatus">
    <ul>
        <li class="applicationStatus">Başvuru Alındı</li>
        <li class="applicationStatusGood">Dil Sınavı</li>
        <li class="applicationStatusNoGood">Sözlü Mülakat</li>
        <li class="applicationStatus">Hibe</li>
    </ul>
</div>

私が達成しようとしているのは次のとおりです。

ここに画像の説明を入力

画像の矢印部分の位置合わせに苦労しています。css3shapes.comの助けを借りて:after疑似要素を使用してその部分を作成しましたが、正しく配置できないようです。

after セレクターのマージン値の設定は、垂直方向の配置には機能しますが、水平方向の配置には機能しません。

私は何をすべきか？

4

4 に答える 4

1

Jsfiddle を確認する

http://jsfiddle.net/arunberti/kaHek/120/

margin: -10px 90px 0 10px;
于 2013-07-26T09:10:11.460 に答える
0

あなたが探しているものを正確に達成できるこのコードをチェックしてください...! :)

望ましい CSS3 形状

jsfiddle

コード：

HTML:

<div id="css3">
    <ul>
        <li class="css3">HTML5/CSS3</li>
        <li class="css3">Shapes</li>
        <li class="css3">Hello World!</li>
    </ul>
</div>

CSS:

#css3 {
  position: relative;
  width: 630px;
  height: 140px;
  top: 20px;
  left: 40px;
}

ul.css3 {
  list-style: none;
}

li.css3 {
  height: 140px;
  background-color: #76a942;
  display: inline-block;
  /* Dirty IE Hack */
  zoom: 1;
  padding: 10px;
  color: #fff;
  font-size: 1em;
  text-align: center;
  line-height: 150px;
  margin-left: 50px;
  }

li.css3:after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-left: 40px solid #76a942;
    border-top: 80px solid transparent;
    border-bottom: 80px solid transparent;
    margin: -10px 90px 0 10px;
}
于 2013-07-26T09:45:22.903 に答える
0

証拠金規則:

Margin: 25px 50px 75px 100px;
  • 上余白は25px
  • 右マージンは 50px
  • 下マージンは75px
  • 左余白は100px

あなたの場合、これはうまくいきます：margin: -10px 90px 0px 10px;

これの最後の値がpadding: 10px;inli.applicationStatus, li.applicationStatusGood, li.applicationStatusNoGoodメソッドと同じであることを確認してください。

于 2013-07-26T09:14:49.540 に答える