Rumah > Artikel > hujung hadapan web > Bolehkah kecerunan linear css3 mencapai segi tiga?
Bolehkah kecerunan linear css3 mencapai segi tiga?
- 青灯夜游asal
- 2022-04-25 14:47:402073semak imbas
kecerunan linear css3 boleh merealisasikan segi tiga; hanya mencipta kecerunan linear 45 darjah dan menetapkan warna kecerunan kepada dua warna tetap, satu ialah warna segi tiga dan satu lagi adalah warna lutsinar. kecerunan (45deg, nilai warna, nilai warna 50%, warna lutsinar 50%, warna lutsinar 100%)".
Persekitaran pengendalian tutorial ini: sistem Windows 7, versi CSS3&&HTML5, komputer Dell G3.
Dalam CSS3, terdapat banyak cara untuk melaksanakan segi tiga, salah satunya ialah menggunakan kecerunan linear. Mari berikan anda pengenalan terperinci di bawah.
Prinsip menggunakan kecerunan linearlinear-gradient untuk melaksanakan segi tiga juga sangat mudah Kami melaksanakan 45° transformasi linear kecerunan:
div {
width: 100px;
height: 100px;
background: linear-gradient(45deg, deeppink, yellowgreen);
}
div {
width: 100px;
height: 100px;
background: linear-gradient(45deg, deeppink, deeppink 50%, yellowgreen 50%, yellowgreen 100%);
}
div {
background: linear-gradient(45deg, deeppink, deeppink 50%, transparent 50%, transparent 100%);
} 
atau rotate, kita juga boleh mendapatkan segi tiga pelbagai sudut dan saiz: scale
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
html,
body {
width: 100%;
height: 100%;
display: flex;
}
div {
width: 100px;
height: 100px;
margin: auto;
}
.rotate {
background: linear-gradient(45deg, deeppink, deeppink 50%, transparent 50%, transparent 1px);
}
.top {
background: linear-gradient(45deg, deeppink, deeppink 50%, transparent 50%, transparent 1px);
transform: rotate(135deg);
}
.left {
background: linear-gradient(45deg, deeppink, deeppink 50%, transparent 50%, transparent 1px);
transform: rotate(45deg);
}
.bottom {
background: linear-gradient(45deg, deeppink, deeppink 50%, transparent 50%, transparent 1px);
transform: rotate(-45deg);
}
.right {
background: linear-gradient(45deg, deeppink, deeppink 50%, transparent 50%, transparent 1px);
transform: rotate(-135deg);
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
tutorial video css, bahagian hadapan web)
Atas ialah kandungan terperinci Bolehkah kecerunan linear css3 mencapai segi tiga?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!