CSS3は小さな矢印のさまざまなグラフィック効果を実現します

#三角形を上に{
	表示:インラインブロック;
	幅:0;
	高さ:0;
	border-left:30px 透明、実線;
	border-right: 30px 透明の実線;
	border-bottom:50px 赤一色;}
#下向きの三角形 {
	表示:インラインブロック;
	幅:0;
	高さ:0;
	border-left:30px 透明、実線;
	border-right: 30px 透明の実線;
	border-top:50px 赤一色;}
#三角形左 {
	表示:インラインブロック;
	幅:0;
	高さ:0;
	border-top: 30px 透明の実線;
	border-right: 50px 赤一色;
	ボーダー下部: 30px 透明実線;}
#三角形右
	表示:インラインブロック;
	幅:0;
	高さ:0;
	border-top: 30px 透明の実線;
	border-left: 50px 赤一色;
	ボーダー下部: 30px 透明実線;} 

#三角形-上左 {
    表示:インラインブロック;
    幅: 0;
    高さ: 0;
    border-top: 50px 赤一色;
    border-right: 50px 透明の実線;
}
#三角形-右上 {
    表示:インラインブロック;
    幅: 0;
    高さ: 0;
    border-top: 50px 赤一色;
    border-left: 50px 透明の実線;
}
#三角形-下左 {
    表示:インラインブロック;
    幅: 0;
    高さ: 0;
    border-bottom: 50px 赤一色;
    border-right: 50px 透明の実線;
}
#三角形右下 {
    表示:インラインブロック;
    幅: 0;
    高さ: 0;
    border-bottom: 50px 赤一色;
    border-left: 50px 透明の実線;
}

＃心臓 {
    位置: 相対的;
    幅: 100ピクセル;
    高さ: 90px;
}
#ハート:前、
#ハート:後{
    位置: 絶対;
    コンテンツ： "";
    左: 50px;
    上: 0;
    幅: 50px;
    高さ: 80px;
    背景: 赤;
    境界線の半径を 50px に設定します。
    境界線の半径: 50px 50px 0 0;
    -webkit-transform: 回転(-45度);
       -moz-transform:回転(-45度);
        -ms-transform:回転(-45度);
         -o-transform: 回転(-45度);
            変換: 回転(-45度);
    -webkit-transform-origin: 0 100%;
       -moz-transform-origin: 0 100%;
        -ms-変換原点: 0 100%;
         -o-変換原点: 0 100%;
            変換原点: 0 100%;
}
#ハート:後{
    左: 0;
    -webkit-transform: 回転(45度)。
       -moz-transform:回転(45度);
        -ms-transform:回転(45度);
         -o-transform: 回転(45度);
            変換: 回転(45度);
    -webkit-transform-origin: 100% 100%;
       変換の起点は 100% 100% です。
        変換の原点を 100% に設定します。
         -o-変換の原点: 100% 100%;
            変換の原点:100% 100%;
}