如何使用 CSS 创建斜线？
先决条件- CSS
使用 CSS 中的背景图像属性很容易实现这些斜线，
-
正常彩色对角线条纹:这里，对角线条纹是使用 CSS 中的重复线性渐变()构造的。
示例:
```html <!DOCTYPE html>
.module { background: white; border: 1px solid #ccc; margin: 3%; width: 40%; > h2 { padding: 1rem; margin: 0 0 0.5rem 0; }}
.stripe-1 { color: white; background: repeating-linear-gradient( /Angle of sloping line/ 45deg, /First Color of the Stripe/ #fff, #fff 10px, /Second Color of the Stripe/ #aed581 10px, #aed581 20px ); }
```GFG
输出:
![]()
-
渐变对角线条纹:这使得一半的条纹完全透明使用 r 重影-线性-渐变()，看起来条纹好像有渐变。
示例:
```html <!DOCTYPE html>
.module { background: white; border: 1px solid #ccc; margin: 3%; width: 40%; > h2 { padding: 1rem; margin: 0 0 0.5rem 0; }}
.stripe-1 { color: white; background: repeating-linear-gradient( /Angle of the slope line/ 45deg, /To make The stripe transparent at the end/ transparent, transparent 10px, #ccc 10px, #ccc 20px ), linear-gradient( to bottom, /Color of the Stripe/ green, green ); }
```GFG
输出:
![]()
-
径向条纹:这些条纹是使用径向梯度实现的，可以在重复线性梯度下使用()。
示例:
```html <!DOCTYPE html>
.module { background: white; border: 1px solid #ccc; margin: 3%; width: 40%; > h2 { padding: 1rem; margin: 0 0 0.5rem 0; }}
.stripe-1 { color: white; background: repeating-radial-gradient( /Shape of the repeating lines/ circle, /First Color of the stripe/ green, green 10px, /Second Color of the stripe/ #aed581 10px, #aed581 20px );
}
```GFG
输出:
![]()
版权属于：月萌API www.moonapi.com，转载请注明出处
