투명도가있는 점선 모양의 단추 모양

투명한 배경과 점선이있는 단추를 사용자 지정 모양으로 만들 수 있습니까?투명도가있는 점선 모양의 단추 모양

나는 배경색이 작업을 수행 할 지금 수 있어요,하지만 난 어떤 색깔없이 내부를 채우기 위해하려고 할 때 예상대로, 아무것도 작동하지 않습니다.

body{ 
 
    background: #999 
 
} 
 
button { 
 
    height: 50px; 
 
    width: 250px; 
 
    border: dotted 1px #FFF; 
 
    border-bottom: none; 
 
    background: none; 
 
    position: relative; 
 
} 
 
button:after, 
 
button:before { 
 
    content: ''; 
 
    display: block; 
 
    position: absolute; 
 
    top: 100%; 
 
    width: 0; 
 
    height: 0; 
 
    border-style: solid; 
 
} 
 

 
button:after { 
 
    border-color: #fff transparent transparent transparent; 
 
    border-width: 1px 125px 0 0; 
 
    right: 1px 
 
} 
 

 
button:before { 
 
    border-color: transparent transparent #fff transparent; 
 
    border-width: 0 125px 1px 0; 
 
    left: 0 
 
}

<body> 
 
<button></button> 
 
</body>

출처

2017-09-03 Ricky Spanish

나는 버튼에 대해 너무 잘 모르겠지만, 당신은 확실히 된 div에서 모양을 만들 수 있습니다.

당신이 찾고있는 것은 도형을 만들기위한 테두리가있는 연극입니다.

당신이 볼 수 있듯이

#triangle{ 
 
\t width: 0; 
 
\t height: 0; 
 
\t border-left: 30px solid transparent; 
 
\t border-right: 30px solid transparent; 
 
\t border-bottom: 40px solid green; 
 
}

<div id="triangle"></div>

, 나는 그냥 테두리 삼각형을 만들어 트릭은 DIV의 경계를 이해하는 것입니다. 그들은 직선이 아니며, 끝은 쐐기 모양입니다.

나는 이것이 당신을위한 좋은 출발점이라고 생각합니다.

출처

2017-09-03 06:11:36

투명도가있는 점선 모양의 단추 모양

답변

관련 문제