0

cssの形をリストアイコンに合わせようとしています。

現在、次のようになっています。

ここに画像の説明を入力してください

しかし、次のようになります。

ここに画像の説明を入力してください

私はposition：absoluteを使ってみました。相対的; とマージン、まだ何もありません。ライブテストは次のとおりです。

http://jsfiddle.net/fzSrL/

css：

.services-info ul {}
.services-info ul li {
    background: #fff;
    margin: 40px 0;
    padding: 10px;
    height: 115px;
    width: 263px;
}

.services-info ul li:before {
    content: "";
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-right: 100px solid red;
    border-bottom: 50px solid transparent;
}

.services-info ul li:nth-of-type(1) {
    list-style-image: url(../images/fb-icon.png);
}

.services-info ul li:nth-of-type(2) {
    list-style-image: url(../images/twitter-icon.png);
}

.services-info ul li:nth-of-type(3) {
    list-style-image: url(../images/yt-icon.png);
}

どうすればそれらを揃えることができますか？それとも、コーナーとしての画像がより良いオプションでしょうか？

4

1 に答える 1

2

position: relativeで使用し、li次にposition: absolute「矢印」（ ）で使用する必要がありますli:before。

top次に、 /leftと負のの組み合わせを使用して矢印を正確に配置できますmargin-top。

参照： http： //jsfiddle.net/fzSrL/2/

この手法はここで説明されています：http：//css-tricks.com/absolute-positioning-inside-relative-positioning/

于 2011-06-13T16:38:48.127 に答える