css 漂亮的关闭按钮

可以使用伪元素来实现漂亮的关闭按钮，具体代码如下：

.close {
  position: relative;
  width: 20px;
  height: 20px;
  cursor: pointer;
}

.close::before,
.close::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2px;
  height: 16px;
  background-color: #000;
}

.close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

这段代码会生成一个宽高为 20px 的关闭按钮，按钮中间有一条横线和一条竖线，看起来像是一个叉号。你可以根据需要调整按钮的大小和颜色。

相关问题

CSS 按钮和按钮对齐

同样可以使用CSS的flexbox布局来实现按钮和按钮的对齐。具体做法如下：

HTML代码：

<div class="container">
  <button>按钮1</button>
  <button>按钮2</button>
  <button>按钮3</button>
</div>

CSS代码：

.container {
  display: flex;
  justify-content: space-between;
}

button {
  flex: 1;
  margin-right: 10px;
}

以上代码中，我们首先将包含按钮的容器设置为flex布局，然后使用justify-content属性将它们水平居中对齐，并使用space-between值使它们之间有一定的间隔。接着，我们将按钮的flex属性设置为1，使其平分剩余的空间。最后，我们给按钮设置一个右边距，使它们之间有一定的间隔。这样就可以实现按钮和按钮的对齐了。

css 上线 三角按钮

CSS上线三角按钮的实现可以有多种方法，以下是其中的一种常见方式：

HTML：

<button class="triangle-btn"></button>

CSS：

.triangle-btn {
  width: 0;
  height: 0;
  border-width: 10px;
  border-style: solid;
  border-color: transparent transparent transparent #000;
}

这个方法使用了border属性和透明边框的特性来实现三角形的效果。首先，将按钮的宽度和高度设置为0，然后设置边框的宽度为10px，以便定义三角形的大小。接下来，设置边框的样式为实线，同时设置三个边框的颜色为透明，最后一个边框的颜色为黑色。这样，按钮的左边和右边的边框将会是透明的，而上边的边框将会是黑色，形成一个三角形的形状。

当然，这只是一种简单的实现方式，实际上，CSS中可以使用伪元素选择器(::before或::after)来更灵活地创建三角形按钮。通过调整边框的大小、颜色和方向，以及利用其他的CSS属性和伪元素，可以创建出更多不同样式的三角形按钮。