vue 网页标题栏梯形设计

Question

vue+vite 网页前端顶部标题栏怎么做成下方这种呀？#前端 #vue #网页设计

Answer 1

该回答引用GPTᴼᴾᴱᴺᴬᴵ
要实现这样的标题栏梯形设计，可以使用CSS来进行样式设置。具体的实现方法如下：

1. 在HTML文件中添加一个顶部容器，用来容纳标题栏和其他内容。
2. 在CSS文件中设置该容器的背景颜色和高度，使其成为顶部标题栏的背景。
3. 使用CSS中的伪元素:before和:after来实现标题栏梯形设计。具体实现方法是在:before伪元素中设置一个向上的三角形，使其与容器底部对齐；在:after伪元素中设置一个和容器底部一样高的矩形，使其覆盖掉:before伪元素中的三角形。
4. 最后，将标题栏放置在容器内，并设置其z-index属性，使其在容器中处于最上层。

下面是一份示例代码：

HTML代码：

<div class="top-container">
  <div class="title-bar">
    <h1>网页标题</h1>
  </div>
  <div class="content">
    <!-- 其他内容 -->
  </div>
</div>

CSS代码：

.top-container {
  height: 80px;
  background-color: #333;
  position: relative;
}

.title-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 60px;
  background-color: #fff;
  z-index: 2;
}

.title-bar h1 {
  margin: 0;
  padding: 20px;
}

.top-container:before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 20px 0 0 100vw;
  border-color: transparent transparent transparent #fff;
}

.top-container:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 20px;
  background-color: #fff;
  z-index: 1;
}

上述代码中，top-container类表示整个顶部容器，title-bar类表示标题栏，content类表示标题栏下方的其他内容。在top-container类中使用:before和:after伪元素来设置标题栏梯形效果，其中:before伪元素设置了一个向上的三角形，:after伪元素设置了一个覆盖了:before伪元素的矩形。