[分享]css写一个满屏的品字

发布于 2024-11-11 15:25:14

CSS可以实现很多有趣的效果，包括让一个元素填满整个屏幕。下面我们就来看一种用CSS实现满屏品字的方法。/ 设置body和html标签的高度为100 这样就能让元素占满整个屏幕 / body, h...

CSS可以实现很多有趣的效果，包括让一个元素填满整个屏幕。下面我们就来看一种用CSS实现满屏品字的方法。

/**
 * 设置body和html标签的高度为100%
 * 这样就能让元素占满整个屏幕
 */
body, html {
  height: 100%;
  margin: 0;
  padding: 0;
}

/**
 * 设置品字的宽度和高度
 * 当前的大小为屏幕宽度的70%
 * 可以根据需求进行更改
 */
.pinzhi {
  width: 70%;
  height: 70%;
  margin: auto;
  position: absolute;
  top: 0; bottom: 0; left: 0; right: 0;
}

/**
 * 设置品字的颜色和边框
 * 当前的颜色为粉色
 * 边框为1像素的实线
 */
.pinzhi .p {
  position: absolute;
  top: 0; bottom: 0; left: 0; right: 0;
  border-top: 1px solid #FFAEB9;
  border-bottom: 1px solid #FFAEB9;
}

.pinzhi .inzhi {
  position: absolute;
  top: 50%; left: 0;
  border-left: 1px solid #FFAEB9;
  border-right: 1px solid #FFAEB9;
  transform: translate(0, -50%);
}

.pinzhi .inzhi:before,
.pinzhi .inzhi:after {
  content: "";
  position: absolute;
  border-top: 1px solid #FFAEB9;
  width: 50%; height: 50%;
}

.pinzhi .inzhi:before {
  top: 0; left: 0;
}

.pinzhi .inzhi:after {
  bottom: 0; right: 0;
  transform: rotate(180deg);
}

通过上述的CSS代码，我们可以实现一个满屏品字。只需要在HTML中加入下列代码，就可以看到效果了。

<body>
  <div class="pinzhi">
    <div class="p"></div>
    <div class="inzhi"></div>
  </div>
</body>

这就是一个简单的满屏品字的实现方法。

css 教程

一个月内的热帖推荐

91云脑

Lv.1普通用户

62849 帖子	14 小组	291 积分

62849

帖子

小组

291

积分

关注作者

发帖	回复	分享

赞助商广告

本组热帖