Question

是否能够创建具有透明背景和虚线边框的按钮，并具有自定义形状？

我现在可以用背景颜色来做这件事，但是当我试图填充没有任何颜色的内部时，没有任何东西按预期工作。

＆＃13;

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
}

＆＃13;

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

＆＃13;

Answer 1

我对按钮不太确定，但你当然可以用div创建形状。

你正在寻找的是一个带边框来创造形状的游戏。

＆＃13;

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

＆＃13;

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

＆＃13;

正如你所看到的，我创建了一个只有边框的三角形，诀窍是理解div的边界。它们不是直的，它们的末端是楔形的。

我认为这是一个很好的起点。

按钮形状，透明度和虚线边框

1 个答案: