css - 如何三角形顶部和底部边框?
问题描述
正如您在下图中看到的,我正在尝试从底部和顶部扭曲或三角形我的 div,但我不知道该怎么做。我只是尝试了几次,但我无法达到结果。那么我怎样才能在伪之前使用它呢?用psuedo做没关系,但我想知道怎么做?
这是我的代码:
body{
background:lightblue;;
}
.block{
background-image: linear-gradient(to right, #314b56, #283b44, #1f2c32, #161e21, #0a0f11);
border: 1px solid #fff;
width: 300px;
height: 150px;
margin: 30px;
}
<div class="block"></div>
解决方案
使用转换和透视的想法,您将拥有边界、边界半径以及渐变:
body {
background: lightblue;
}
.block {
overflow: hidden;
width: 300px;
height: 200px;
margin: 20px;
position: relative;
z-index:0;
}
.block::before,
.block::after {
content: "";
position: absolute;
z-index:-1;
border: 1px solid #fff;
top: 0;
bottom: 0;
width: 50%;
background-image: linear-gradient(to right, #314b56, #283b44, #1f2c32, #161e21, #0a0f11);
background-size: 200% 100%;
}
.block::before {
left: 0;
border-right: 0;
border-radius: 15px 0 0 15px;
transform-origin: right;
transform: perspective(100px) rotateY(-5deg);
}
.block::after {
right: 0;
border-left: 0;
border-radius: 0 15px 15px 0;
transform-origin: left;
transform: perspective(100px) rotateY(5deg);
background-position: right;
}
<div class="block"></div>
您还可以添加阴影并轻松更改渐变:
body {
background: lightblue;
}
.block {
overflow: hidden;
width: 300px;
height: 200px;
margin: 20px;
position: relative;
z-index:0;
filter:drop-shadow(0 0 5px #000);
}
.block::before,
.block::after {
content: "";
position: absolute;
z-index:-1;
border: 1px solid #fff;
top: 0;
bottom: 0;
width: 50%;
background-image: linear-gradient(35deg, blue, red);
background-size: 200% 100%;
}
.block::before {
left: 0;
border-right: 0;
border-radius: 15px 0 0 15px;
transform-origin: right;
transform: perspective(100px) rotateY(-5deg);
}
.block::after {
right: 0;
border-left: 0;
border-radius: 0 15px 15px 0;
transform-origin: left;
transform: perspective(100px) rotateY(5deg);
background-position: right;
}
<div class="block"></div>
推荐阅读
- python - 是什么破坏了 FastAPI 的 Swagger UI?- 它停止工作并在名为“default”的组下显示 API 调用
- python - 如何将 css 类包含到 django 表单中
- java - 无法使用 javac 和 lombok 在控制台中编译 .h 文件。错误:包 lombok 不存在
- jmeter - 响应代码:非 HTTP 响应代码:org.apache.http.conn.HttpHostConnectException
- php - 使用 sqlsrv_query 插入日期的日期格式是什么?
- javascript - 将 Rgba 颜色值从 js 发送到 Laravel 中的控制器
- c++ - 使用 malloc 进行动态内存分配
- javascript - 如何返回添加了锻炼字段的用户对象?
- python-3.x - 命令出错并出现错误:命令出错,退出状态为 1:python setup.py egg_info
- python-3.x - 如何在 Windows 上为 Tesseract 安装新的语言包