0

psedoクラスを使用してdivの外側に矢印を作成する方法を知っていますが、以下に示すようにdivの内側に矢印を作成する必要があります

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

どうすればこれを入手できますか？

4

4 に答える 4

7

そこを見てください：http： //css-tricks.com/examples/ShapesOfCSS/

于 2012-09-27T10:54:36.077 に答える
7

追加の要素を使用する必要はありません。これは、CSS3 を使用して完全に行うことができます。

background-color: gray;
background-image: 
   linear-gradient(135deg, transparent 75%, #000 75%), /*right side of triangle*/
   linear-gradient(45deg, transparent 75%, #000 75%)   /*left side of triangle*/;
background-position: 30px 0, 0 0;
background-repeat: no-repeat;
background-size: 30px 30px;

デモ (ベンダープレフィックス付き: http://jsfiddle.net/rLZkf/1/ )。

この三角形のテクニックの説明

sourceの下の画像に見られるように、CSS は単純な構文を使用した線形カラー グラデーションをサポートします。

少し想像すると、前の画像に三角形が見えます。ただし、対角線で色が混ざります。そのため、明示的なカラー ストップ位置を設定します。これらの位置が等しい場合、視覚的なブレンドはなくなり、塗りつぶされた三角形が得られます。

三角形を導入する時が来ました:

background-image: linear-gradient(45deg, transparent 50%, black 50%);

グラデーションは左下隅から始まり、45° の角度により右上隅で終わります。カラー ストップの位置は 50% と定義されているため、三角形の左下の部分は透明で、残りの半分は黒です。別の三角形を取得するには、135° の角度を使用します。両方の角度の画像を次に示します。

この時点で、直角三角形を作成する方法がわかりました。さらに進むには、斜辺が垂直または水平に配置された三角形を作成できる必要があります。これを実現するために、2 つの三角形を結合します。CSS3 では、複数の背景のサポートが導入されています。この機能は、三角形を作成するために使用されます。

/* Create triangles */
background-image: 
   linear-gradient(135deg, transparent 75%, #000 75%), /*right side of triangle*/
   linear-gradient(45deg, transparent 75%, #000 75%)   /*left side of triangle*/;
/* Move one of the triangles to the right */
background-position: 30px 0, 0 0;
/* Don't repeat the background image (remove this to see what would happen) */
background-repeat: no-repeat;
/* Define the size of the triangle */
background-size: 30px 30px;

75%前の CSS コードでは、 ( の代わりに) をカラー ストップの場所として使用していることがわかります50%。この選択は重要ではありません。三角形の最終的な形状は、グラデーションのカラー ストップ位置の値によって決まりbackground-positionますbackground-size。

**注: 説明では、ベンダー プレフィックスを省略しました。この手法を使用するには、ベンダー プレフィックスを追加する必要があります (デモで見られるように)。

関連文書

于 2012-09-27T11:03:08.370 に答える
1

.........................。

今は

after:  pseudo-class

このように

.some{
width:100px;
  height:100px;
  background:red;
position:relative;
  overflow:hidden;
}

.some:after{
content:'';
  position:absolute;
  left:10px;
  top:-11px;
z-index:0;
  width:25px;
  height:25px;
  background:green;
  transform:rotate(45deg);
  -ms-transform:rotate(45deg); /* IE 9 */
-moz-transform:rotate(45deg); /* Firefox */
-webkit-transform:rotate(45deg); /* Safari and Chrome */
-o-transform:rotate(45deg); /* Opera */
}

ライブデモ

于 2012-09-27T11:00:54.573 に答える
1

最短で最もブラウザー互換性のあるソリューション:

CSS:

​div{
    position:relative;
    height: 200px;
    width: 200px;
    background-color: gray;
}
div::after{
    content: '';
    border: solid 15px transparent;
    border-top-color:black;
    position:absolute;
    top:0;
    left: 30px;
}

デモ:
http://jsfiddle.net/7bP9q/

于 2012-09-27T13:28:35.040 に答える