CSSを使用して右矢印を描く

私のプロジェクトでは、右矢印で矩形を描く必要があり、黒色の境界線を持つ白い背景色で塗りつぶす必要があります。私は多くの方法で試しましたが、私は白い背景と黒の色の境界線で右矢印を取得しませんでした。CSSを使用して右矢印を描く

私は、コードをfollwoing試してみました：

HTML: 
<html> 
<head></head> 
<body> 
<div class="paddingstyleleft right-arrow1">   
<div><span><img src="images/referral_out.png"/> &nbsp;Referred To<span> 
<div><strong>Dr.Sarah Willam</strong><span class="bandagealign"><span   class="bandage">3</span></span></div>    
<div class="datestyle"><img src="images/Date.png"/>&nbsp;Jul 24th,2016 &nbsp;| <div class="datestyle1 scheduledstatus"><span class="spanwaiting">Scheduled</span></div></div></div>   
</div> 
</body> 
</html> 


CSS: 

.right-arrow1 { 
display: inline-block; 
position: relative; 
background: white; 
padding: 15px; 
height: 100px; 
padding:25px; 
border-bottom: 1px solid grey; 
width: 285px; 
border: 1px solid black; 
} 
.right-arrow1:after { 
content: ''; 
display: block; 
position: absolute; 
left: 100%; 
top: 50%; 
margin-top: -10px; 
width: 0; 
height: 0; 
border-top: 10px solid transparent; 
border-right: 10px solid transparent; 
border-bottom: 10px solid transparent; 
border-left: 10px solid black; 
}

出典

2016-08-25 adhi

JSFiddleを作成してコードを修正しました。主な問題は、黒いアウトラインを作成するための「前」擬似クラスのルールを追加していないことです。 https://jsfiddle.net/c7u54ehd/ – Desmond

矢印のために、このCSSを試してみてください国境

フィドルリンクにhttps://jsfiddle.net/m4dv4f7s/

div{ 
    position: relative; 
    background-color: #008000; 
    padding: 0px 16px; 
    height: 40px; 
    line-height: 40px; 
    display: inline-block; 
    color: white; 
    border: 2px solid black; 
    border-right: none; 
    z-index:1; 
} 

div:before{ 
    content: ''; 
    position: absolute; 
    left: 100%; 
    z-index:-1; 
    width: 28px; 
    height: 28px; 
    background-color: #008000; 
    border-right: 2px solid black; 
    border-bottom: 2px solid black; 
    transform: rotate(-45deg) translate(-14px,-7px); 
}

出典

2016-08-25 11:43:22 Friend

ありがとうございました。私は期待どおりにうまくいきます。 – adhi

あなたは全ての矢印のために、このバイオリンを確認することができます。

をhttps://jsfiddle.net/wLxag8pn/

.arrow-up { 
    width: 0; 
    height: 0; 
    border-left: 5px solid transparent; 
    border-right: 5px solid transparent; 
    border-bottom: 5px solid black; 
} 

.arrow-down { 
    width: 0; 
    height: 0; 
    border-left: 20px solid transparent; 
    border-right: 20px solid transparent; 
    border-top: 20px solid #f00; 
} 

.arrow-right { 
    width: 0; 
    height: 0; 
    border-top: 60px solid transparent; 
    border-bottom: 60px solid transparent; 
    border-left: 60px solid green; 
} 

.arrow-left { 
    width: 0; 
    height: 0; 
    border-top: 10px solid transparent; 
    border-bottom: 10px solid transparent; 
    border-right: 10px solid blue; 
}

出典

2016-08-25 11:45:07 fernando

CSSを使用して右矢印を描く

答えて

関連する問題