CSS를 사용하여 오른쪽 화살표 그리기

내 프로젝트에서 오른쪽 화살표가있는 사각형을 그리고 검정색 테두리가있는 흰색 배경으로 채워야합니다. 여러 가지 방법으로 시도했지만 흰색 배경과 검은 색 테두리가있는 오른쪽 화살표를 얻지 못했습니다.CSS를 사용하여 오른쪽 화살표 그리기

내가 코드 때라도 시도 :

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를 사용하여 오른쪽 화살표 그리기

답변

관련 문제