2

何週間もどこでも検索しましたが、問題の答えが見つかりません。

正三角形の中に画像を入れることはできますか?

シェイプまたはマスクを作成する多くの方法を見てきましたが、実際の三角形が必要です。これは、次の画像のように、いくつかの三角形を上下に並べて並べる必要があるためです。

http://www.tiikoni.com/tis/view/?id=d49c960

2 種類の三角形を色で分けましたが、いずれも色ではなく画像になっています。

私はskewX、skewY、およびrotateを使用してみました.十分な結果が得られましたが、完璧ではありません:

<div class='pageTri2'>
<a href='#' class='option2'>
    <img src='image.jpg'>
</a>
</div>

<style>
.pageTri2 {
    overflow: hidden;
    position: relative;
    margin: 40px auto;
    width: 250px; height: 250px;
    display: inline-block;
}
.option2, .option2 img { width: 100%; height: 100%; }
.option2 {
    overflow: hidden;
    position: absolute;
    transform: skewX(-25deg) skewY(45deg);
    transform-origin: 50% 50% 0;
}
.option2:first-child {
    transform-origin: 100% 0;
}
.option2:last-child {
    transform-origin: 0 100%;
}
.option2 img { opacity: .75; transition: .5s; }
.option2 img:hover { opacity: 1; }
.option2 img, .option2:after {
transform: skewX(-20deg) skewY(-20deg) rotate(-50deg);
transform-origin: 0 100% 0;
}
.option2:first-child:after { top: 0; left: 0; }
.option2:last-child:after { right: 0; bottom: 0; }
</style>

完璧な結果を得ることは可能ですか？それとも、間違った方向に考えているのでしょうか？

ありがとうエール

追記:やったぜ!! SVG のアドレスを教えてくれた @Spudley と、jsfiddle の使用を提案してくれた @ov に感謝します。

ここに私のコードがあります: http://jsfiddle.net/wkJKA/

4

3 に答える 3

6

真面目な話ですが、達成しようとしていることのモックアップイメージを見て、CSSでそれを行うというアイデアを捨てると思います。

このような作業は、CSSではなくSVGを使用して行う方がはるかに優れています。CSSは、複雑な形状パターンを作成するために設計されたものではありません。それはそれを行うことができますが、それはすぐに厄介になり、あなたが求めている効果のようなもののために、あなたはいくつかの追加のHTMLマークアップを必要とすることになります。SVGはまさにこの種のもののために設計されており、それをうまく実行します。

唯一の欠点は、古いIEバージョンでSVGがサポートされていないことですが、これには回避策があります。transform（いずれにせよ、古いIEで動作しない他のCSSをすでに使用していることを考えると、古いIEのサポートは明らかに優先事項ではありません）

于 2013-03-12T21:56:05.207 に答える
3

透明な png を使用するか、単純に css で三角形を作成します。これはCSSシェイプへのリンクですhttp://www.css3shapes.com

于 2013-03-12T21:18:32.037 に答える
1

三角形のような形状を実現するには、境界線レンダリングの詳細に依存することができます。次に、形状を疑似要素で追加できます。

.pointy:before {
  border:50px solid transparent;
  border-bottom:86px solid green;
  border-top:0px solid transparent;/*renders looking like a triangle with 100px sides*/
  width:0;
  height:0;
  display:inline-block;
  content:"";
  margin:0 -75px -5px 0; /*for a 50x50 icon*/
}

いじる

于 2013-03-12T22:52:08.763 に答える