用CSS画圆、半圆、线性箭头
一、css画半圆
border-radius
可以设置盒子四边的弧度。可以设置%,px等单位。
在css中利用border-radius可以画出圆形,半圆,等图案
半圆需要两个块元素,两个块元素分别设置一个对应的角即可。
<style>.a{width: 200px;height: 200px;background-color: red;border-top-left-radius: 200px;}.b{width: 200px;height: 200px;background-color: red;border-bottom-left-radius: 200px;}</style>
</head>
<body><div class="a"></div><div class="b"></div>
</body>
平行半圆同理。
二、 css画圆
绘制一个圆形,只需要使用border-radius内缩50%即可。
div{width: 300px;height: 300px;background-color: red;border-radius: 50%;}
三、 css画线性箭头
原理和实心箭头一样,不过需要旋转一下元素。
1.先设置div属性
div{width: 100px;height: 100px;border-color: red red transparent transparent;border-width: 5px;border-style: solid;
}
2.设置旋转
transform: matrix(0.75, 0.75, -0.75, 0.75, 0, 0);
用CSS画圆、半圆、线性箭头相关推荐
- 初始化css样式代码、颜色、字体、浮动与清除浮动、显示、定位、盒子模型、按钮禁用、CSS画圆半圆扇形三角梯形
顔色 sass顔色变量声明 在vue中声明颜色变量时需要在 vue.config.js 里面增加如下配置. module.exports = { // ... css: { sourceMap: tr ...
- CSS画圆半圆扇形三角梯形
直接上代码: div{margin: 50px;width: 100px;height: 100px;background: red; } /* 半圆 */ .half-circle{height: ...
- css画圆、半圆、椭圆、圆环
css画圆 在css中利用border-radius可以画出我们想要的圆 border-radius属性 可以设置盒子四边的圆弧.从上左,上右,下右,下左顺时针依次设置四个属性 也可以单独设置一个方向 ...
- 【css】用css画圆,半圆和三角形
用css画圆,半圆和三角形 圆,半圆 三角形 圆,半圆 // 圆 宽高相等, border-radius大于宽度的一半 .circle{width: 100px;height: 100px;backg ...
- html画圆圈原理,用CSS画圆
我曾经向大家分享了一个非常巧妙的用纯CSS画三角形的技巧.在过去的一年里,我发现这种用CSS画三角形的技术非常的有用和高效,尤其是创建提示框/提示符等类似的网页效果上.另外一种也可以用CSS简单的实现 ...
- CSS画圆、三角形、品字、骰子
CSS画圆.三角形.品字.骰子 前言:这篇文章主要是本人正在看面试题,面试题当成八股文来背,太难了.所以,通过写笔记,并自己实践来加深印象.如果这篇文章对你有帮助,请不要吝啬你的赞. 圆 让 bord ...
- css画圆, 如何用纯css实现一个动态画圆环效果
最终的效果是:用纯css实现动态画圆的动画效果 html结构如下: <div class="wrap"> <div class="circle" ...
- HTML+CSS画圆、半圆、扇形、三角形
使用border-radius:____px代码实现圆,半圆,扇形,三角形 1.圆 html中设定一个盒子 css中盒子样式 代码实现图 2.半圆 html中设定一个盒子 css中盒子样式 代码实现效 ...
- CSS画出半圆,四分之一圆,三角等图形
圆形 .icon{width: 100px;height: 100px;background: red;border-radius: 50%;} 半圆 .icon{width: 100px;heigh ...
最新文章
- $state 新标签页
- java综合图形界面程序设计_java综合图形界面程序设计.doc
- python处理pdf 层_Python处理PDF及生成多层PDF实例代码
- xml文件的三种解析方式 DOM SAM PULL
- linux percpu机制解析
- PMP-全书知识重点图
- JITSI开源视频直播
- linux 下载ftp 命令,在Linux命令行中安装及使用FTP客户端的方法
- python飞机大战实训报告200_飞机大战实训报告方案.doc
- Pycharm 字体大小调整
- Class文件结构神秘的微笑(二)
- C# 生成带二维表头的Excel表
- IoT 物联网设备端 SDK 架构设计参考
- 5分钟使用ssl证书免费配置任意域名的 https
- 重磅开源:基于.NET 6.0 自研轻量级ORM框架
- 默认路由的配置(锐捷)
- 思科ASA系列防火墙配置手册
- 打通NI LabVIEW与飞桨工具链,百度携手NI探索工业硬科技新方向
- linux系统结构包括什么
- 华硕PRIME B660M-K D4 i5-13600KF黑苹果efi引导文件