css2----实现三角形和带角框
2024-10-14 13:59:09
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
/*三角形*/
/* div{width:0;height:0;border-top:10px solid transparent;border-bottom:10px solid transparent;border-left:10px solid;} */
/*带角框*/
div{width:100px;height:100px;border:2px solid;} div::before{content:"";display:block;width:0;height:0;border-top:8px solid transparent;border-bottom:8px solid transparent;border-left:8px solid black;position:relative;top:10px;left:100px;}
div::after{content:"";display:block;width:0;height:0;border-top:8px solid transparent;border-bottom:8px solid transparent;border-left:8px solid white;position:relative;top:-6px;left:98px;} </style>
</head>
<body>
<div></div> </body>
</html>
实现三角形的原理:1,div的border生成是向外扩的,2,当div有相邻border时,拐角处会以一种各占一半的三角拼合。所以当设这div的宽高为0和0时,如果它有四个border的话,就会组成一个正方形,每边分别为一个等腰三角形,此时若设任意三边对望的两个边为透明色(transparent)时,剩下的一边为一个等腰三角形。
带角框实现原理:利用两个三角形的相对定位使产生视觉上的相减形成不闭合的角号(“>”)。
最新文章
- 在VS中用正则表达式查找或替换
- 用mac系统制作mac系统启动盘
- thinkphp禁止模版标签解析
- Timer.5 - Synchronising handlers in multithreaded programs
- JavaScript中的作用域和声明提前
- Spring中Bean的生命周期讨论
- 【USACO 5.3.1】量取牛奶 迭代
- SignUtil
- AI - TensorFlow - 可视化工具TensorBoard
- 速查mysql数据大小
- PHP 异常处理 throw new exception
- oracle的PDB启动
- Qt自定义控件系列(一) --- 圆形进度条
- Python学习(十九) —— 前端基础之HTML
- Address localhost:1099 is already in use
- jstl标准标签库 常用标签
- python学习之思维导图
- [原创]SpotLight性能监控工具使用介绍
- 利用javascript判断文件是否存在
- MySQL Crash Course #02# Chapter 3. 4 通配符. 分页
热门文章
- CSS 笔记三(Tables/Box Model/Outline)
- python:页面布局 后台管理页面之常用布局
- Linux crontab 命令详解
- laravel框架总结(七) -- 数据库操作
- 解决安装完centos6.6之后/etc/sysconfig/目录下没有iptables 的问题
- sql索引实例
- 使用IE11抓包,防止在网页跳转时抓包数据被清除的方法
- HDU 5734 Acperience(返虚入浑)
- hdu 5446 Unknown Treasure 卢卡斯+中国剩余定理
- iOS - Mac Vim 编辑器