用CSS画圆、半圆、线性箭头

article/2025/1/16 11:07:48

一、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);

 


http://chatgpt.dhexx.cn/article/y15QtjvO.shtml

相关文章

css画圆教程

目录 一、border-radius1.作用2.使用语法 二、border-color 本文章主要讲解css的border-radius&#xff0c;border-color两个属性&#xff0c;利用它们就可以画出你想要的图形。 一、border-radius 1.作用 border-radius 允许你设置元素的外边框圆角。当使用一个半径时确定一…

用css画圆

用css完成一个实心圆形。要求圆形有边框、背景色&#xff0c;边框的宽度为10px、颜色为红色、边框样式为实心。背景色为蓝色。 background-color: blue;width: 100px;height: 100px;border-radius: 50%;border: 10px solid red;用css实现颜色渐变效果 background: radial-grad…

yml书写格式

书写格式&#xff1a; 大小写敏感属性层级关系使用多行描述&#xff0c;每行结尾使用冒号结束使用缩进表示层级关系&#xff0c;同层级左侧对齐&#xff0c;只允许使用空格(不允许使用Tab键)属性值前面添加空格(属性名与属性值之间使用冒号空格作为分隔)# 表示注释 注&#x…

Spring boot yml文件的书写格式

Spring boot yml文件的书写格式 使用ide 创建好spring boot文件格式后https://blog.csdn.net/weixin_42292697/article/details/93479876 再resources 目录下 创建了application.yml 的文件名 文件名不需要改动&#xff0c;改动Spring boot 会不识别 而导致出现错误 创建一个…

yml的格式写法

一.普通对象 1.语法 # 普通赋值配置 name: zhangsan2.范例 二.多层对象赋值 1.语法 # 配置端口号 server:port: 8088 # 对象配置 person:name: zhangsanage: 21gender: 12.范例 三.行内对象 1.语法 # 行内对象 person2: {name: zhangsn,age: 21,gender: 1}2.范例 四.数组…

springboot环境配置,yml格式,不同环境切换

配置文件properties.yml格式 注意&#xff1a; 大小写敏感数据前要有空格数据格式&#xff1a;对象、数组、纯量、数据格式引用${} # 加载顺序 yml > yaml > properties # 覆盖顺序&#xff1a;properties > yaml > yml&#xff0c;即properties中内容与其他冲突…

快速替换jar包中.class、.html、.yml格式的文件

快速替换jar包中.class、.html、.yml格式的文件 文章目录 快速替换jar包中.class、.html、.yml格式的文件背景下载反编译软件JD-GUI使用 jd-gui 打开web.jar 文件找到对应的jar包中需要修改的class 文件将代码复制到新的java文件&#xff0c;并修改相应的内容解压web.jar 文件使…

YML简介

在接触springboot的时候遇到了一种特殊的配置文件 .yml&#xff0c;本文对yml作简单介绍&#xff0c;快速入手yml。 一、YML是什么 YAML (YAML Aint a Markup Language)YAML不是一种标记语言&#xff0c;通常以.yml为后缀的文件&#xff0c;是一种直观的能够被电脑识别的数据…

YML文件格式学习

最近的SpringBoot项目里用到yml文件作为配置文件&#xff0c;简单的了解下&#xff0c;它的基本语法如下 大小写敏感使用缩进表示层级关系缩进时不允许使用Tab键&#xff0c;只允许使用空格。缩进的空格数目不重要&#xff0c;只要相同层级的元素左侧对齐即可&#xff03; 表示…

Spring boot yml的格式

spring boot 配置文件的格式分为两种 第一种就是&#xff1a; #spring.datasource.urljdbc:sqlite:D:/demo/springboot-sqlite-master/src/main/db/myDb spring.datasource.urljdbc:sqlite:D:/demo/springboot-sqlite-master/src/main/db/myDb spring.datasource.usernameroo…

【微服务】使用yml格式进行nacos拓展配置

文章目录 前言1、properties格式配置2、yml格式配置 前言 在学习过程中接触到了在bootstrap.yml文件中对nacos的拓展配置&#xff0c;对一方面目前还不算是太熟悉&#xff0c;因此便打算在网上进行学习。 但是经过一系列搜索&#xff0c;发现网上众多都是使用的properties充当…

.json格式转为.yml格式

.json格式转为.yml格式 在跑ssd-6d代码时&#xff0c;出现了一个严重的问题&#xff0c;代码中用到的数据集里的文件都是.yml文件&#xff08;eg:camera.yml&#xff09;但是在下载的数据集&#xff08;teijani&#xff09;中也没有相应的.yml文件&#xff0c;数据及里提供的都…

Java Yml格式转换为Properties

Yml格式文件转换为Properties格式 问题引入转换代码代码解读 问题引入 使用在线的yml转换properties, 发现有属性内容漏了&#xff0c;网站地址https://tooltt.com/yaml2properties/。 于是自己动手写个转换工具类&#xff0c;自测过多个 yml 文件&#xff0c;目前没发现遗漏的…

Spring Boot配置文件yml格式详解

在Spring Boot项目中配置文件格式可以是.properties格式,也可以是yml格式,但是一般使用yml格式的比较多,yml格式都有什么语法?yml格式怎么配置?本文将详细的讲解yml的具体使用。 简介 YAML 是一种简洁的非标记语言(YAML Ain’t Markup Language),YAML以数据为中心,使用空…

连线图

电子发声单元接线图 点阵单元接线图 点阵实验接线图 连线设计图

五类直连线做法

五类直连线两头线序相同&#xff0c;都是 白橙、橙、白绿、蓝、白蓝、绿、白棕、棕 如下图所示&#xff0c;将水晶头卡扣朝下&#xff0c;插入网线后用网线钳夹紧即可。

连连看(三)

Python3 实现QQ游戏连连看游戏辅助 连连看&#xff08;零&#xff09;—— 前记连连看&#xff08;一&#xff09;—— 你看&#xff0c;这是截图啊连连看&#xff08;二&#xff09;—— 哦吼&#xff0c;PIL CV2 Numpy 假图像识别构建矩阵连连看&#xff08;三&#xff09…

连点成线

做技术和做产品都需要沉心深研。做技术侧重对物性的理解&#xff0c;突破原有限制&#xff0c;创造新的领域&#xff1b; 做产品侧重对人性的理解&#xff0c;善于使用技术&#xff0c;创造简单易用的服务。技术需要落地于产品&#xff0c;展示其威力; 产品需要新技术的引擎&am…

图解计算机基础网站上线了

大家好&#xff0c;我是小林。 就在昨天 4 点半&#xff0c;我收到了工信部的短信&#xff0c;通知了我的域名备案完成了&#xff01; 足足等待了一周&#xff0c;域名终于备案完了&#xff0c;久等了各位&#xff01;心急的小伙伴&#xff0c;可以到末尾见直接看网站域名。 …