使用 Sass 制作倾斜角度

是什么样的方法呢？

``````background-image: linear-gradient(\$angle, \$color 50%, transparent 50%);
``````

``````.container {
@include tilted(\$angle: 3deg, \$color: rgb(255, 255, 255));
}``````

计算伪元素的高度

``c = a / sin(C - B)``

``b² = c² - a²``

``b = √(c² - a²)``

``````@function get-tilted-height(\$angle) {
\$a: (100% / 1%);
\$A: (90deg - \$angle);
\$c: (\$a / sin(\$A));
\$b: sqrt(pow(\$c, 2) - pow(\$a, 2));
@return (abs(\$b) * 1%);
}
``````

编写实现倾斜的混合宏

``````@mixin tilted(\$angle, \$color) {
\$height: get-tilted-height(\$angle);
position: relative;
background-color: \$color;

&::before {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 100%;
background-image: linear-gradient(\$angle, \$color 50%, transparent 50%);
}
}
``````

总结和进一步探讨

• 不能在一个已被占用的`::before`伪元素使用。这时可以通过增加一个可选参数来指定伪元素，默认为`before`
• 不能在容器的底部显示一个倾斜角度，因为`bottom:0`目前已经在mixin 核心里硬编码。这可以通过传递额外的位置到mixin来解决。

``````<div class="container">
<div class="content">
<h1>Tilted angles in CSS</h1>
<p>Thanks to Pythagoras Theorem, some gradients and a bit of Sass-powered trigonometry, we can easily created tilted angles with nothing but CSS.</p>
<pre><code>.container {
@include tilted(3deg, \$color: #fff);
}</code></pre>
<p>How handy!</p>
</div>
</div>``````
``````/// Computes the height of the tilted pseudo-element based on the given angle
/// using Pythagoras Theorem.
// sin(..), pow(..) and sqrt(..)  functions come from this pen:
// https://codepen.io/HugoGiraudel/pen/rLpPGo
/// @access public
/// @author Hugo Giraudel
/// @param {Angle} \$angle - the tilt angle
@function get-tilted-height(\$angle) {
\$a: (100% / 1%);
\$A: (90deg - \$angle);
\$c: (\$a / sin(\$A));
\$b: sqrt(pow(\$c, 2) - pow(\$a, 2));

@return (abs(\$b) * 1%);
}

/// Apply a tilted effect by generating a pseudo-element with a diagonal
/// splitted background.
/// @access public
/// @author Hugo Giraudel
/// @param {Angle} \$angle - the tilt angle
/// @param {Color} \$color - the color to be used as background + gradient
/// @param {String} \$position ['top'] - either `top` or `bottom`
/// @param {String} \$pseudo ['before'] - either `before` or `after`
@mixin tilted(\$angle, \$color, \$position: 'top', \$pseudo: 'before') {
\$height: get-tilted-height(\$angle);

position: relative;
background-color: \$color;

&::#{\$pseudo} {
content: '';
position: absolute;
left: 0;
right: 0;

@if (\$position == 'top') {
bottom: 100%;
background-image: linear-gradient(\$angle, \$color 50%, transparent 50%);
} @else {
top: 100%;
background-image: linear-gradient(\$angle, transparent 50%, \$color 50%);
}
}
}

/*
* Demo styles
*/

html {
box-sizing: border-box;
height: 100%;
}

*, ::before, ::after {
box-sizing: inherit;
}

body {
background-color: rgb(223, 231, 238);
line-height: 1.5;
font-size: 125%;
display: flex;
align-items: flex-end;
height: 100%;
}

.container {
@include tilted(3deg, rgb(255, 255, 255));
max-width: 80%;
margin: 0 auto;
filter: drop-shadow(0 1em 1em rgba(0, 0, 0, 0.1));
}

.content {
max-width: 600px;
margin: 0 auto;
}

h1 {
border-bottom: 3px double deepskyblue;
margin-bottom: 0.25em;
}

pre {
background-color: #efefef;
border: 1px solid rgba(0, 0, 0, 0.1);
}``````

21 文章

21934 人气