按钮形状与透明度和只有虚线边框

它是否能够创建一个具有透明背景和虚线边框，自定义形状的按钮？按钮形状与透明度和只有虚线边框

我现在能够与背景颜色要做到这一点，但是当我尝试以填充内部没有任何色彩，没有按预期工作。

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

按钮形状与透明度和只有虚线边框

回答

相关问题