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

技术标签: CSS  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)、实线、透明

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/hexiyuanhecy/article/details/83796031

智能推荐

ARM开发软件ADS教程_arm.developer.suite使用教程-程序员宅基地

文章浏览阅读4.7k次。ARM开发软件ADS教程 ADS(ARM Developer Suite)是ARM公司推出ARM集成开发环境,操作简单方便,获得广大开发人员的青睐。下面使用ADS v1.2做一个实例教程,帮助大家学会使用ADS编写程序和仿真调试。(使用汇编语言) 首先:下载ADS v1.2版本(英文版)并安装好ADS。安装好ADS之后可以看到开始菜单---所有程序---ARM Developer Suit_arm.developer.suite使用教程

Python的datetime_python 手写datetime-程序员宅基地

文章浏览阅读4.6k次。Python提供了多个内置模块用于操作日期时间,像calendar,time,datetime。time模块我在之前的文章已经有所介绍,它提供的接口与C标准库time.h基本一致。相比于time模块,datetime模块的接口则更直观、更容易调用。今天就来讲讲datetime模块。 datetime模块定义了两个常量:datetime.MINYEAR和datetime.MAXYEAR,分_python 手写datetime

利用Excel数据爬虫_excel爬虫-程序员宅基地

文章浏览阅读2.4k次,点赞2次,收藏8次。URL部分和URL预览填写为目标(需要爬取数据的网址)的URL地址。第三部找到User-Agent的value复制。就可以在Excel表格里看到想要的数据了。1、在Excel里数据里打开自网站。命令超时选择1分钟即可。HTTP请求标头参数。_excel爬虫

Azure OpenAI:使用Completion/ChatCompletion实现更多可能合集(持续更新)_chatcompletion azure-程序员宅基地

文章浏览阅读198次。不过类似的提示词在GPT4模型下直接使用并不能产生类似的结果,GPT4使用的是ChatCompletion,可以在System Message里或者JSON格式的User Message里带更多的上下文信息过去,在这个案例里GPT4过于智能的将两个表进行了交叉查询,看到网上有其他开发人员使用了JSON解析的方法来拼出SQL文,有机会可以尝试。###创建SQL查询问题:Dear, 210430预计什么时间有货可发?###创建SQL查询问题:Dear, 210430预计什么时间有货可发?_chatcompletion azure

oracle 磁盘空间满后导致无法连接/登陆/使用/启动_oracle的链接数占满sqlplus无法登陆进去怎么处理的-程序员宅基地

文章浏览阅读8.3k次,点赞2次,收藏19次。某天登陆服务器后连接oracle数据库时,突然提示磁盘控件不足,导致sqlplus 登陆失败,提示如下图: 通过命令 df -lh /opt/oracle查看oracle安装目录所在磁盘空间,发现确实已使用100%,如下图: oracle安装目录所在磁盘整个大小才20G,为了一劳永逸,果断准备将oracle系统表空间的数据文件迁移到其他磁盘。此时处理思路应该是先关闭oracle服务,然..._oracle的链接数占满sqlplus无法登陆进去怎么处理的

Docker之MySQL忘记密码_docker 查看mysql 密码-程序员宅基地

文章浏览阅读1.3w次。进入容器docker exec -it mysql /bin/bash修改配置文件执行一下命令cd /etc/mysqlvi my.cnf#在最后添加:skip-grant-tables #在启mysql时不启动grant-tablesmy.cnf 文件内容# Copyright (c) 2014, 2015, Oracle and/or ..._docker 查看mysql 密码

随便推点

计算机毕业设计 SSM与Vue的勤工助学管理系统(源码+论文)_ssm+vue勤工助学-程序员宅基地

文章浏览阅读199次。Hi,各位同学好呀,这里是M学姐!今天向大家分享一个今年(2022)最新完成的毕业设计项目作品,【基于SSM的勤工助学管理系统】学姐根据实现的难度和等级对项目进行评分(最低0分,满分5分)难度系数:3分工作量:5分创新点:3分界面美化:5分界面美化的补充说明:使用vue的基本都能达到5分本项目完成于2022年6月份,包含内容 : 源码 + 论文 + 答辩PPT在开放的互联网平台面前,勤工助学管理系统的信息管理面临着巨大的挑战。传统的管理模式局限于简单数据的管理,无法适应不断变化的市场格局。_ssm+vue勤工助学

分布式锁原理与实现--Redis分布式锁和ZooKeeper分布式锁-程序员宅基地

文章浏览阅读334次,点赞5次,收藏5次。分布式锁的设计和实现是一个复杂但至关重要的课题,不同的实现方式各具优势,根据系统的实际需求和现有技术栈选择合适的分布式锁方案至关重要。在分布式系统中,由于数据分散存储在不同的节点上,当多个节点同时对同一资源进行操作时,如果没有有效的协调机制,就可能出现并发控制问题,导致数据的不一致和冲突。使用setnx命令尝试设置一个唯一的key-value对,key通常与待保护的资源相关联,value可以是线程ID或随机生成的UUID,如果设置成功,则认为获取到了锁。

联想服务器TD630安装系统,ThinkServer_TD340_RAID及系统安装.docx-程序员宅基地

文章浏览阅读597次。ThinkServer_TD340_RAID及系统安装Lenovo ThinkServer TD340 RAID及系统安装前言:Lenovo ThinkServer TD340随机配备导航盘,其RAID及系统安装有两种方式可选:导航盘方式和传统方式。导航盘方式较为简洁,且在系统安装完成后无需再进行驱动安装,其驱动已集成在导航盘上,如以此方式安装按导航盘引导进行即可,在此不做详细介绍;传统方式..._联想服务器td340u盘安装win2008

java字符串转成utf-8_将字符串的编码格式转换为utf-8-程序员宅基地

文章浏览阅读2.1w次,点赞2次,收藏5次。方式一:/*** 将字符串的编码格式转换为utf-8** @param str* @return Name = new* String(Name.getBytes("ISO-8859-1"), "utf-8");*/public static String toUTF8(String str) {if (isEmpty(str)) {return "";}try {if (str.equals(n..._字符串转utf-8

手把手教你使用YOLOV5训练自己的目标检测模型-口罩检测-视频教程_搭建yolo目标检测的环境. 使用yolo-air模块来做实验-程序员宅基地

文章浏览阅读10w+次,点赞691次,收藏4k次。手把手教你使用YOLOV5训练自己的目标检测模型大家好,这里是肆十二(dejahu),好几个月没有更新了,这两天看了一下关注量,突然多了1k多个朋友关注,想必都是大作业系列教程来的小伙伴。既然有这么多朋友关注这个大作业系列,并且也差不多到了毕设开题和大作业提交的时间了,那我直接就是一波更新。这期的内容相对于上期的果蔬分类和垃圾识别无论是在内容还是新意上我们都进行了船新的升级,我们这次要使用YOLOV5来训练一个口罩检测模型,比较契合当下的疫情,并且目标检测涉及到的知识点也比较多,这次的内容除了可以作为大家_搭建yolo目标检测的环境. 使用yolo-air模块来做实验

Linux命令大全(非常详细)从零基础入门到精通,看完这一篇就够了_linux系统基本操作命令-程序员宅基地

文章浏览阅读6k次,点赞10次,收藏81次。网络安全行业产业以来,随即新增加了几十个网络安全行业岗位︰网络安全专家、网络安全分析师、安全咨询师、网络安全工程师、安全架构师、安全运维工程师、渗透工程师、信息安全管理员、数据安全工程师、网络安全运营工程师、网络安全应急响应工程师、数据鉴定师、网络安全产品经理、网络安全服务工程师、网络安全培训师、网络安全审计员、威胁情报分析工程师、灾难恢复专业人员、实战攻防专业人员…最常用的打包命令是 tar,使用 tar 程序打出来的包我们常称为 tar 包,tar 包文件的命令通常都是以 .tar 结尾的。_linux系统基本操作命令

推荐文章

热门文章

相关标签