宽高自适应_css样式写出三角形，宽高自适应的正方形，扇形！
生活随笔
收集整理的這篇文章主要介紹了
宽高自适应_css样式写出三角形，宽高自适应的正方形，扇形！
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
閑來無事練習一下常見的css樣式,希望大家能指點一二！
1用css實現一個三角形！原理用border屬性
<!DOCTYPE html> <html> <head><title>三角形</title><style type="text/css">.box1, .box2, .box3, .box4 {height: 0px;width: 0px;float: left;border-style: solid;margin: 10px;}.box1 { /* 等腰直角 */border-width: 100px;border-color: tomato transparent transparent transparent;}.box2 { /* 等邊 */border-width: 100px 173px;border-color: transparent tomato transparent transparent;}.box3 { /* 等腰 */border-width: 100px 80px;border-color: transparent transparent tomato transparent;}.box4 { /* 其他 */border-width: 100px 90px 80px 70px;border-color: transparent transparent transparent tomato;} </style> </head> <body><div class="box1"></div><div class="box2"></div><div class="box3"></div><div class="box4"></div> </body> </html>實現它的原理那就要弄明白border屬性，
border是一個復合屬性
2，寫出幾個寬高自適應的正方形
<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><style>/* 都是像對于屏幕寬度的比例 */.square1 {width: 10%;height: 10vw;background: red;}/* margin/padding 百分比是相對父元素 width 的 */.square2 {width: 20%;height: 0;padding-top: 20%;background: orange;}/* 通過子元素 margin */.square3 {width: 30%;overflow: hidden;/* 觸發 BFC */background: yellow;}.square3::after {content: '';display: block;margin-top: 100%;/* 高度相對于 square3 的 width */}</style> </head> <!-- 畫一個正方形 --><body><!-- <div class="square1"></div><div class="square2"></div> --><div class="square3"></div> </body></html>3用css寫一個扇形實現一個1/4的圓，任意弧度的扇形
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>/* 通過 border 和 border-radius 實現 1/4 圓 */.sector1 {height: 0;width: 0;border: 100px solid;border-radius: 50%;border-color: turquoise tomato tan thistle;}/* 類似三角形的做法加上父元素 overflow: hidden; 也可以實現任意弧度圓 */.sector2 {height: 100px;width: 200px;border-radius: 100px 100px 0 0;overflow: hidden;}.sector2::after {content: '';display: block;height: 0;width: 0;border-style: solid;border-width: 100px 58px 0;border-color: tomato transparent;transform: translate(42px, 0);}/* 通過子元素 rotateZ 和父元素 overflow: hidden 實現任意弧度扇形（此處是60°） */.sector3 {height: 100px;width: 100px;border-top-right-radius: 100px;overflow: hidden;/* background: gold; */}.sector3::after {content: '';display: block;height: 100px;width: 100px;background: tomato;transform: rotateZ(-30deg);transform-origin: left bottom;}/* 通過 skewY 實現一個60°的扇形 */.sector4 {height: 100px;width: 100px;border-top-right-radius: 100px;overflow: hidden;}.sector4::after {content: '';display: block;height: 100px;width: 100px;background: tomato;transform: skewY(-30deg);transform-origin: left bottom;}/* 通過漸變設置60°扇形 */.sector5 {height: 200px;width: 200px;background: tomato;border-radius: 50%;background-image: linear-gradient(150deg, transparent 50%, #fff 50%),linear-gradient(90deg, #fff 50%, transparent 50%);}</style> </head><body><div style="display: flex; justify-content: space-around;"><div class="sector1"></div><div class="sector2"></div><div class="sector3"></div><div class="sector4"></div><div class="sector5"></div></div> </body></html>這個工作中不是能經常用到的就不詳細注釋了請諒解！這篇文章就到這里 歡迎看一下篇css重中之重，水平垂直居中和清除浮動！
總結
以上是生活随笔為你收集整理的宽高自适应_css样式写出三角形，宽高自适应的正方形，扇形！的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 大数据的说法 正确的是_前端测试题:(解
- 下一篇： 中班音乐活动 机器人_【教育生活】音乐浸