divの両面矢印

Question

divの上に両面矢印を生成しようとしています。私は 'after'で生成することができましたが、beforeは動作していません。どうしたらいいですか？

div { 
 
    width: 5px; 
 
    height: 220px; 
 
    background-color: red; 
 
    /* Rotate div */ 
 
    -ms-transform: rotate(30deg); 
 
    /* IE 9 */ 
 
    -webkit-transform: rotate(30deg); 
 
    /* Chrome, Safari, Opera */ 
 
    transform: rotate(30deg); 
 
    transform-origin: bottom left; 
 
    position: relative; 
 
} 
 
div:after { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    border-style: solid; 
 
    transform: translate(-40%, -50%); 
 
    border-width: 0 10px 20px 10px; 
 
    border-color: transparent transparent red transparent; 
 
} 
 
div:before { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    border-style: solid; 
 
    transform: translate(-40%, -50%); 
 
    border-width: 0 10px 20px 10px; 
 
    border-color: transparent transparent red transparent; 
 
}

<div></div>

View on JSFiddle

Answer 1

あなたは:beforeと:afterの両方に同じルールを持っています。ちょうどそれをsligtly調整し、あなたは金色です。

div { 
 
    width: 5px; 
 
    height: 220px; 
 
    background-color: red; 
 
    /* Rotate div */ 
 
    -ms-transform: rotate(30deg); 
 
    /* IE 9 */ 
 
    -webkit-transform: rotate(30deg); 
 
    /* Chrome, Safari, Opera */ 
 
    transform: rotate(30deg); 
 
    transform-origin: bottom left; 
 
    position: relative; 
 
} 
 

 
div:before, 
 
div:after { 
 
    content: ''; 
 
    position: absolute; 
 
    left: 0; 
 
    border-style: solid; 
 
    border-color: red transparent; 
 
} 
 
div:after { 
 
    top: 0; 
 
    transform: translate(-40%, -50%); 
 
    border-width: 0 10px 20px 10px; 
 
} 
 
div:before { 
 
    bottom: 0; 
 
    transform: translate(-40%, 50%); 
 
    border-width: 20px 10px 0 10px; 
 
}

<div></div>

Answer 2

こんにちは、あなたのフィドルを更新しています

https://jsfiddle.net/p6tryx79/1/

div { 
    width: 5px; 
    height: 120px; 
    background-color: red; 
    /* Rotate div */ 
    -ms-transform: rotate(30deg); 
    /* IE 9 */ 
    -webkit-transform: rotate(30deg); 
    /* Chrome, Safari, Opera */ 
    transform: rotate(30deg); 
    transform-origin: bottom left; 
    position: relative; 
    margin-left:30px; 
} 
div:after { 
    content: ''; 
    position: absolute; 
    top: 0; 
    left: 0; 
    border-style: solid; 
    transform: translate(-40%, -50%); 
    border-width: 0 10px 20px 10px; 
    border-color: transparent transparent red transparent; 
} 
div:before { 
    content: ''; 
    position: absolute; 
    bottom: -6px; 
    left: -4px; 
    border-style: solid; 
    transform: rotate(60deg); 
    border-width: 0 10px 20px 10px; 
    border-color: transparent transparent red transparent; 
}