CSS画圆和三角形_css 圆边三角形-程序员宅基地

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>CSS画图形</title>
	<style>
		#circle{
			width: 200px;
			height: 200px;
			background-color: grey;
			border-radius: 100px;
		}
		#half-circle{
			width: 200px;
			height: 100px;
			background-color: blue;
			border-radius: 0 0 100px 100px;
		}
		#half-half-circle{
			width: 100px;
			height: 100px;
			background-color: grey;
			border-radius: 0 0 100px 0;
		}
		#up-triangle{
			width: 0;
			height: 0;
			border-left: 100px solid transparent;
			border-right: 100px solid transparent;
			border-bottom: 200px solid green;
		}
		#up-triangle2{
			width: 0;
			height: 0;
			border-left: 100px solid red;
			border-right: 100px solid yellow;
			border-top: 100px solid orange;
			border-bottom: 100px solid green;
		}
		#up-triangle3{
			width: 0;
			height: 0;
			border-left: 100px solid red;
			border-right: 100px solid yellow;
			border-bottom: 200px solid green;
		}
	</style>
</head>
<body>
	<div style="float: left;">
		<div id="circle">正圆</div>
		<div id="half-circle">半圆</div>
		<div id="half-half-circle">四分之一圆</div>
	</div>
	<div id="up-triangle" style="float: left;">上三角形</div>
	<div id="up-triangle2" style="float: left;"></div>
	<div id="up-triangle3" style="float: left;"></div>
</body>
</html>

画圆就用 border-radius：上右下左

把圆水平垂直平均分四等分，从左上角开始顺时针依次为上、右、下、左，

想要哪边的圆就设置对应位置的半径，还能画出圆角矩形啥的

画三角形就用 border-top：长度边框样式颜色。

如上图正方形，奖正方形对角线平均分四等分，在顶部的就是top依次类推

想要朝哪的三角形，例如朝上，就把反方向bottom的设置为想要的高度（例如100px）、实线、颜色，其余对立位置设置为想要高度的一半（50px）、实线、透明

本文链接：https://blog.csdn.net/hexiyuanhecy/article/details/83796031

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

java内存溢出问题排查_mfyvo-程序员宅基地

文章浏览阅读1.1k次。一、使用工具Eclipse Memory Analyzer tool, 简称MAT下载地址：http://www.eclipse.org/mat/downloads.php二、生成heap dump file （内存溢出时，自动生成）1、问题代码package com.mfy.vo;public class User { private int id = 111_mfyvo

Modbus-crc16校验原理和方法（含测试代码以及演算过程）_modbus crc-程序员宅基地

文章浏览阅读7.2k次，点赞18次，收藏59次。本文主要讲了modbuscrc16的计算方法和手算验证过程。以及一些modbus的基础知识_modbus crc

unity 物体沿某一坐标轴旋转_unity 绕一轴旋转-程序员宅基地

文章浏览阅读715次。obj.transform.Rotate(0, fRotateSpeed * Time.deltaTime, 0, Space.Self);_unity 绕一轴旋转

【测试】8bit和4bit量化对模型在MMLU数据集上准确率的影响_q4量化 mmlu-程序员宅基地

文章浏览阅读859次，点赞30次，收藏16次。下面是改变其中某个参数后在 MMLU 数据集上的准确率，可以看出即使是 4bit 对准确率影响都没有很大，首 Token 性能还可以接近原精度，还节省了大量的空间。ms，最后的测试结果还算比较接近官方的结果，以此作为 baseline 和量化后的模型权重对比推理下游任务准确率的损失情况。），4bit 量化包含两种 4bit 的数据类型 FP4 和 NF4，以及。Mistral-7B 是一个很强的 7B 开源模型，在 Mistral。）并直接在原精度（BF16）上进行推理，尝试复现出官方的准确率。_q4量化 mmlu

python——飞机大战小游戏_python小游戏代码飞机大战-程序员宅基地

文章浏览阅读2.9k次，点赞4次，收藏22次。先安装一下pygame这个库然后将素材烤入，一些飞机图片和背景需要修改一下编辑器不然会找不到草率了，貌似得再pycharm里下载pip下载的它找不到我又重新下载了一下再右面加号新建一个解释器选择本地python.exe，把公开它的库选上终于好了。_python小游戏代码飞机大战

Carla系列——4.Cara模拟器添加语义分割相机（Semantic segmentation camera）_如何使用carla仿真语义分割模型-程序员宅基地

文章浏览阅读1.8k次，点赞6次，收藏15次。本节的内容是生成一个语义分割相机，主要分为：四部分。一、初始化世界以及添加车辆二、生成语义分割相机Semantic segmentation camera三、监听语义分割相机，进行数据处理四、呈现最终效果一、初始化世界以及添加车辆这一节承接之前生成车辆的内容（Carla生成车辆）.设置vehicle 为自动控制模式1.添加车辆的完整代码为：import globimport osimport sysimport timeimport randomimport._如何使用carla仿真语义分割模型