闲来无事练习一下常见的css样式,希望大家能指点一二！

1用css实现一个三角形！原理用border属性

<!

实现它的原理那就要弄明白border属性，

border是一个复合属性

  1. border-width 指定边框的宽度
  2. border-style 指定边框的样式
  3. border-color 指定边框的颜色
  4. inherit 指定从父元素继承的border属性

CSS Border(边框) | 菜鸟教程​www.runoob.com

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>

  1. 第一种的原理：都是相对于屏幕宽度的比例。
  2. 第二种实现原理，margin，padding的百分比都是相对于父元素的width。
  3. 请看css注释会更清晰明了。

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 百分比 怎么固定正方形_css样式写出三角形，宽高自适应的正方形，扇形！...相关推荐

  1. 宽高自适应_css样式写出三角形，宽高自适应的正方形，扇形！

    闲来无事练习一下常见的css样式,希望大家能指点一二! 1用css实现一个三角形!原理用border属性 <!DOCTYPE html> <html> <head> ...

  2. CSS样式写出三角形

    CSS样式写出三角形的样式,在这里只举出两个例子,三角形朝上和三角形朝下,还有左上,左下,右上,右下.有需要或者感兴趣的可以自己调一下代码.调border的top.bottom.left.right的 ...

  3. css边框三角形 怎么用css样式写出三角形 css三角形怎么实现消息框

    css实现边框三角形 这里我就用css样式写一个下三角的样式 其它方向一样 只需要给不想要显实的边框设置透明色即可 div{height: 0; width: 0;border-top: 20px s ...

  4. CSS学习笔记八——宽高自适应

    宽高自适应 一.宽度自适应 二.高度自适应 三.浮动元素的高度自适应 四.窗口自适应 五.结语 一.宽度自适应 不写宽度或者写 width:auto就表示宽度自适应,可用于横栏或导航栏. 与 widt ...

  5. CSS 垂直居中、水平居中及流失布局宽高自适应

    CSS 垂直居中.水平居中及流失布局宽高自适应,在工作中,经常遇到某个元素如何居中,因此介绍一种简单的居中方式.同时,也经常遇到,上到下布局,当顶部动态变化时,及高度不固定,但是底部如何动态铺满父元素 ...

  6. css控制图片拉伸不变形,css+background实现 图片宽高自适应，拉伸裁剪不变形

    图片宽高不固定 ,一样实现自适应,拉伸裁剪不变形,适应各大兼容性. 下面咱们在网上找两张宽高不一样的照片: No.1                                          ...

  7. css3三角形兼容_利用css3特性写出三角形（兼容IE浏览器）

    利用CSS写出三角形的效果 效果如图: 代码如下: .triangle-up { width:0px; height:0px; border-left:10px solid transparent; ...

  8. 从零开始学习前端开发 — 7、CSS宽高自适应

    一.宽度自适应 语法:width:100%; 注: a)块状元素的默认宽度为100% b) 当给元素设置宽度为100%时,继承父元素的宽度 c) 通常使用宽度自适应实现通栏效果 二.高度自适应 语法: ...

  9. 如何写出一份高逼格的简历？新技能 get√

    如何写出一份高逼格的简历  get√ 1.前言: 毕业季到了,很多同学想进入IT行业.但是简历明明投放了很多,却没有收到面试通知,怎么回事? 如果你还是只会写word简历,那你就out啦! 好的简历是 ...

最新文章

  1. [转]C++中的static关键字的总结
  2. .NET Core和.NET Standard有什么不同
  3. 在Delphi中关于UDP协议的实现
  4. 三角形带优化库nvtrisrip的使用
  5. python对excel数据求和_96、python操作excel求和
  6. mysql5.7物理备份_Mysql5.7—运维常用备份方式
  7. Python 列表List - Python零基础入门教程
  8. 通用目标检测（集合）
  9. Oracle版本区别[转载]
  10. SqlServer性能检测之Sql语句排查
  11. RegularExpressions
  12. shell 脚本中常用的列表
  13. 测试cpu温度软件mac,mac电脑怎么查看cpu温度和风扇转速的详细步骤
  14. 一个标准的k-means(误差平方和版本)
  15. cmake gcc target specific option mismatch
  16. 后缀–ize_常见词性后缀
  17. java pdf 富文本_Java生成pdf，兼富文本
  18. 一级计算机windows考试试题,2001年4月全国计算机等级考试一级笔试试题Windows
  19. 整合篇：零基础学习与使用ElasticSearch
  20. qt5 开发及实例(第4版)_才聪学习网_中级微观经济学第4版练习题详解

热门文章

  1. itunes未能连接到iphone_iTunes下载_苹果iTunes官方下载「32位|64位」
  2. Linux基础（firewalld防火墙配置管理工具的图形用户界面）
  3. oracle迁移undo表空间,oracle切换undo表空间
  4. 多学一招总没错吧？SpringBoot解决前后端分离的跨域问题
  5. k8---proxy
  6. Ubuntu18.04 关于使用vnc的踩坑
  7. Super-palindrome【字符串+思维】
  8. 步步为营 SharePoint 开发学习笔记系列 七、SharePoint Timer Job 开发
  9. 区间DP初探 P1880 [NOI1995]石子合并
  10. 2Python全栈之路系列之MysQl基本数据类型