css切角+玻璃效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>样式</title>
<link rel="stylesheet" href="">
</head>
<body>
<style>
body{
background-color: rgb(12,23,51);
}
.city {
display: inline-block;
padding: 5px 20px;
border: 2px solid rgba(43,74,118,0.8);
color: rgb(144,206,231);
transform: skew(-20deg);
border-radius: 0 10px 0 10px;
/* box-shadow: 4px 2px 0px rgba(43,74,118,0.8); */
}
.city2 {
position: relative;
display: inline-block;
border: 2px solid rgba(43,74,118,0.4);
color: rgb(144,206,231);
transform: skew(-20deg);
border-radius: 0 10px 0 10px;
width: 75px;
height: 30px;
left: -75px;
top: 20px;
z-index: -10;
/* 我们的确是把整个 div 进行了歪曲，导致中间的文字也是倾斜的，所以我们需要加一个内层元素，并对内层元素做一次逆向的歪曲 */
.city div {
transform: skew(20deg);
}
</style>
<div>
<div class="city">
<div>上海</div>
</div>
<div class="city2"></div>
</div>
<div class="test">
<div class="div6">
<div class="cut_left_bottom"></div>
<div class="content">这是内容</div>
<div class="cut_right_top"></div>
<em class="emf"></em>
<em class="ems"></em>
<em class="eml"></em>
</div>
<div class="div6_bg">
<div class="cut_left_bottom"></div>
<div class="cut_right_top"></div>
</div>
</div>
<div class="div5"></div>
<style>
/* -webkit-box-reflect:below -10px;倒影 */
.div5 {
width: 100px;
height: 40px;
line-height: 40px;
background:linear-gradient(-135deg, #fff 15px, #162e48 0);
color: #fff;
padding: 5px 15px;
text-align: center;
box-shadow: 0 0 1px 1px #fff;
margin-bottom: 30px;
position: relative;
}
.div5:after {
content: ' ';
border: solid transparent;
position: absolute;
border-width: 15px;
border-top-color: #000;
border-right-color: #000;
top: -1px;
right: -1px;
}
.test{margin: 100px;}
.div6 {
width: 160px;
height: 40px;
line-height: 40px;
background:rgba(14,28,63,0.7);
color: rgba(144,206,231,0.6);
padding: 5px 15px;
text-align: center;
position: relative;
/* border: 2px solid rgba(43,74,118,0.8); */
box-shadow: 0 0 5px rgba(144,206,231,0.8);
transform: skew(-45deg);
}
.div6_bg{
width: 160px;
height: 40px;
line-height: 40px;
background:rgba(14,28,63,0.8);
padding: 5px 15px;
text-align: center;
position: relative;
/* border: 2px solid rgba(43,74,118,0.8); */
box-shadow: 0 0 5px rgba(144,206,231,0.4);
transform: skew(-45deg);
left: 5px;
top:-45px;
z-index: -10;
}
.div6 > .content {
transform: skew(45deg);
}
/* 切掉右上角和左下角 */
.cut_right_top:before {
content: ' ';
border: 10px solid transparent;
position: absolute;
border-top-color: rgba(43,74,118,0.8);
border-right-color: rgba(43,74,118,0.8);
right: 0px;
top: 0px;
}
.cut_right_top:after {
content: ' ';
border: solid transparent;
position: absolute;
border-width: 14px;
border-top-color: rgba(13,25,51,1);
border-right-color: rgba(13,25,51,1);
top: -4px;
right: -6px;
}
.cut_left_bottom:before {
content: ' ';
border: 10px solid transparent;
position: absolute;
border-bottom-color: rgba(43,74,118,0.8);
border-left-color: rgba(43,74,118,0.8);
left: 0px;
top: 30px;
}
.cut_left_bottom:after {
content: ' ';
border: solid transparent;
position: absolute;
border-width: 14px;
border-left-color:rgba(13,25,51,1);
border-bottom-color: rgba(13,25,51,1);
top: 26px;
left: -6px;
}
.box{
position: relative;
box-shadow: 0 0 10px #FFF;
}
/*反光效果 */
.emf{left: 40px;opacity: 0.8}
.ems{left: 80px;}
.eml{left: 120px;opacity: 0.8}
em{
position: absolute;
top: 0;
width: 40px;
height: 50px;
background-image: -moz-linear-gradient(0deg,rgba(47,78,125,0),rgba(47,78,125,0.4),rgba(47,78,125,0));
background-image: -webkit-linear-gradient(0deg,rgba(47,78,125,0),rgba(47,78,125,0.4),rgba(47,78,125,0));
z-index: -8;
transform: skewx(-25deg);
-o-transform: skewx(-25deg);
-moz-transform: skewx(-25deg);
-webkit-transform: skewx(-25deg);
}
/*鼠标放上去字体渐渐清晰 */
.div6:hover{
color: rgba(144,206,231,1);
-moz-transition:0.5s;
-o-transition:0.5s;
-webkit-transition:0.5s;
transition:0.5s;
}
*/
</style>
</body>
</html>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 【译】Visual Studio 中新的强大生产力特性
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构
· AI与.NET技术实操系列（六）：基于图像分类模型对图像进行分类