CSS
自定义变量
自定义变量作为负值使用
:root {
--code-padding-x: 1.25rem;
}
.box {
margin: 0 calc(var(--code-padding-x) * -1);
padding: 0 var(--code-padding-x);
}
注意
想要把自定义属性 --[variable] 作为负值使用，可以使用 calc(var(--[variable]) * -1)
竖直等腰梯形（文字竖排）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>竖直等腰梯形（文字竖排）</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Microsoft YaHei", sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
padding: 20px;
color: #fff;
}
.container {
max-width: 1000px;
width: 100%;
text-align: center;
}
h1 {
margin-bottom: 30px;
font-size: 2.5rem;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}
.description {
margin-bottom: 40px;
font-size: 1.2rem;
line-height: 1.6;
max-width: 800px;
margin-left: auto;
margin-right: auto;
}
.trapezoid-container {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 40px;
margin-top: 30px;
}
.trapezoid {
position: relative;
width: 100px;
height: 200px;
display: flex;
justify-content: center;
align-items: center;
}
/* 梯形实现 */
.trapezoid-shape {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-right: 50px solid red;
border-left: 0px solid red;
border-top: 40px solid transparent;
border-bottom: 40px solid transparent;
box-sizing: border-box;
z-index: 1;
}
/* 文字样式 */
.trapezoid-text {
position: relative;
z-index: 2;
color: white;
font-weight: bold;
writing-mode: vertical-lr;
text-orientation: upright;
letter-spacing: 10px;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
padding-bottom: 10px;
}
/* 梯形变体样式 */
.trapezoid-variant {
position: relative;
width: 100px;
height: 200px;
display: flex;
justify-content: center;
align-items: center;
margin-top: 20px;
}
.trapezoid-variant .trapezoid-shape {
border-top-color: #e74c3c;
border-bottom-color: #e74c3c;
}
/* 代码展示区域 */
.code-container {
background: #2c3e50;
border-radius: 10px;
padding: 20px;
margin-top: 40px;
overflow-x: auto;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}
pre {
color: #ecf0f1;
text-align: left;
font-size: 1rem;
line-height: 1.5;
white-space: pre-wrap;
}
.code-comment {
color: #7f8c8d;
}
.css-selector {
color: #e74c3c;
}
.css-value {
color: #3498db;
}
.explanation {
margin-top: 30px;
background: rgba(255, 255, 255, 0.1);
padding: 20px;
border-radius: 10px;
text-align: left;
}
.explanation h2 {
margin-bottom: 15px;
color: #ffcc00;
}
.explanation ul {
padding-left: 20px;
}
.explanation li {
margin-bottom: 10px;
line-height: 1.5;
}
@media (max-width: 600px) {
.trapezoid-container {
flex-direction: column;
}
h1 {
font-size: 2rem;
}
}
</style>
</head>
<body>
<div class="container">
<h1>竖直等腰梯形实现</h1>
<p class="description">
以下是如何使用CSS创建一个竖直的等腰梯形，梯形下底在右，上底在左，并实现文字竖排效果。
</p>
<div class="trapezoid-container">
<div class="trapezoid">
<div class="trapezoid-shape"></div>
<div class="trapezoid-text">梯形文字</div>
</div>
<div class="trapezoid-variant">
<div class="trapezoid-shape"></div>
<div class="trapezoid-text">CSS创意</div>
</div>
</div>
<div class="code-container">
<pre><code><span class="code-comment"><!-- HTML代码 --></span>
<div class="trapezoid">
<div class="trapezoid-shape"></div>
<div class="trapezoid-text">梯形文字</div>
</div>
<span class="code-comment"><!-- CSS代码 --></span>
<span class="css-selector">.trapezoid</span> {
<span class="css-value">position: relative;</span>
<span class="css-value">width: 100px;</span>
<span class="css-value">height: 200px;</span>
<span class="css-value">display: flex;</span>
<span class="css-value">justify-content: center;</span>
<span class="css-value">align-items: center;</span>
}
<span class="css-selector">.trapezoid-shape</span> {
<span class="css-value">position: absolute;</span>
<span class="css-value">top: 0;</span>
<span class="css-value">left: 0;</span>
<span class="css-value">width: 100%;</span>
<span class="css-value">height: 100%;</span>
<span class="css-value">border-left: 50px solid transparent;</span>
<span class="css-value">border-right: 0px solid transparent;</span>
<span class="css-value">border-top: 40px solid #3498db;</span>
<span class="css-value">border-bottom: 40px solid #3498db;</span>
<span class="css-value">box-sizing: border-box;</span>
}
<span class="css-selector">.trapezoid-text</span> {
<span class="css-value">position: relative;</span>
<span class="css-value">z-index: 2;</span>
<span class="css-value">color: white;</span>
<span class="css-value">writing-mode: vertical-lr;</span>
<span class="css-value">text-orientation: upright;</span>
<span class="css-value">letter-spacing: 10px;</span>
}</code></pre>
</div>
<div class="explanation">
<h2>实现原理</h2>
<ul>
<li>
使用CSS的border属性创建梯形形状：通过设置左边框为透明，右边框为0，上下边框为有颜色的方式实现梯形效果
</li>
<li>使用writing-mode: vertical-lr属性实现文字竖排</li>
<li>使用text-orientation: upright确保文字方向正确</li>
<li>使用绝对定位将梯形形状置于底层，文字置于上层</li>
<li>通过调整border的宽度值可以改变梯形的倾斜角度和大小</li>
</ul>
</div>
</div>
</body>
</html>