用CSS画一个圆，椭圆，三角

最新推荐文章于 2024-04-11 14:38:55 发布
最新推荐文章于 2024-04-11 14:38:55 发布
阅读量650 收藏 1
点赞数
分类专栏： CSS 学习笔记 文章标签： css css3 html html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45644092/article/details/105221161
版权

怎么用CSS画一个圆，椭圆，三角
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    .circle {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      background: red;
    }
    .elipse {
      width: 100px;
      height: 80px;
      border-radius: 50%;
      background: green;
    }
    .triange {
      width: 0px;
      height: 0px;
      border-left: 70px solid transparent;
      border-right: 70px solid transparent;
      border-bottom: 120px solid pink;
    }
  </style>
</head>
<body>
  <div class="circle"></div>
  <div class="elipse"></div>
  <div class="triange"></div>
</body>
</html>
Friday--星期五
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
【我的前端】前端项目小练习：CSS创建3D圆柱旋转效果
生产队的刘同学
08-28 2345
CSS创建3D旋转圆柱
用 css 画一个三角形，圆，椭圆
Tarafireworks的博客
09-08 170
css 画圆,环形,椭圆
gongstrong123的专栏
03-14 3251
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .circle1{ width: 200px; height: 200px; background-col
CSS3来绘制一个3维立体游泳圈_用css3绘制你需要的几何图形
weixin_30499067的博客
12-23 247
1、圆形示例:思路：给任何正方形元素设置一个足够大的 border-radius ，就可以把它变成一个圆形.代码如下：html:css:.size{width:200px;height: 200px;background: #8BC34A;}.example1{border-radius:100px;}2、自适应椭圆思路：border-radius 这个属性还有另外一个鲜为人知的真相，它不仅可以接...
CSS3来绘制一个3维立体游泳圈_【实例】CSS3画一个半圆的方法
weixin_42465953的博客
12-31 223
前文介绍了css3画实心圆和圆角的方法，本文将继续介绍用CSS3来画一个半圆的方法。CSS3画一个半圆无论圆角、圆弧、实心圆、半圆，css3的实现代码都是 border-radius 属性，border-radius不但可以定义圆半径和圆角大小，还可以设置圆弧的方向，进而画出各种方向的半圆。实现代码很简单，一个上半圆的css3代码如下：.semi-circle{width:100px;height...
css椭圆，椭圆边框
weixin_52450702的博客
04-12 9295
border-radius 允许你设置元素的外边框圆角。当使用一个半径时确定一个圆形，当使用两个半径时确定一个椭圆。这个圆与边框的交集形成圆角效果。 css设置椭圆的方法： 1、给元素添加“ {width:宽度值;height:高度值;}”样式，将元素设置为矩形； 2、给矩形元素添加“ {border-radius:100%;}”圆角样式将其设置为椭圆即可。这种情况如果设置的高和宽是相等的，则图像为圆。 border-radius 属性是一个最多可指定四个 border-*-radius 属性的复合属性 每
CSS3 画基本图形，圆形、椭圆形、三角形等
09-27
在CSS3中，绘制基本图形是一项非常实用的功能，它允许开发者使用纯CSS创建各种形状，如圆形、椭圆形、三角形、平行四边形、梯形、六角星以及五角星等，无需借助图像编辑软件。下面我们将详细介绍如何利用CSS3实现...
CSS制作箭头图标代码(圆，三角形，椭圆)
09-24
首先，我们来讨论如何用CSS代码来创建一个圆。在CSS中，创建一个圆形相对简单，主要使用`border-radius`属性。这个属性可以设置元素的四个角为圆角。如果将`border-radius`的值设置为50%，那么原本的方形元素就会...
html css做椭圆,css实现椭圆
weixin_30700095的博客
06-16 2874
先实现个简单点的，用css实现一个圆，ok，直接上代码：.circle{width: 100px;height:100px;background: red;border-radius: 50%;} 实现椭圆的方法1.利用css3变形.circle{width: 100px;height:100px;background: red;border-radius: 50%;transform: scal...
CSS: border-radius绘制椭圆
weixin_39015132的博客
09-03 5910
前言 设计稿中会有一些上圆弧或下圆弧的样式，需要通过border-radius试一试能不能到达我们想要的效果。 开始 一般设计师会标注椭圆的宽（一般都是大于屏幕的）高。圆弧是居中的。例如： 实践 语法描述： border-radius: 1-4 length|% / 1-4 length|%; 一般写法： border-radius: 50%; 等价于： border-radiu...
用css画圆椭圆形不规则形
QinNara的博客
01-05 2349
 用css画圆椭圆形不规则形详见：http://jingyan.baidu.com/article/49711c61483472fa451b7c66.html 然后配合position：relative相对定位在父元素上面 position：absolute对应在子元素上面 根据top 和left的值可以控制要定位元素的移动范围 CSS3阴影 box-shadow 可以设置阴影的各种
html文本框椭圆,怎么用css画椭圆？
weixin_33997566的博客
06-03 1130
现在随着css3的发展，很多形状可以通过css3画出，本篇文章给大家带来的内容是关于如何快速简单的使用css3画出各种各样的椭圆。使用css3画出各种各样的椭圆的原理：我们需要使用css3中的border-radius属性，修改width值为200px，然后把border-radius改成100px / 50px;“/”之前的是水平半径，”/”之后的是垂直半径，所以 100px / 50px就让d...
使用CSS实现椭圆，三角形，五角星等图形
左岸
08-20 1244
使用CSS实现椭圆，三角形，五角星等图形
用CSS绘制最常见的40种形状和图形(1)
最新发布
2301_76379381的博客
04-11 861
基础知识是前端一面必问的，如果你在基础知识这一块翻车了，就算你框架玩的再6，webpack、git、node学习的再好也无济于事，因为对方就不会再给你展示的机会，千万不要因为基础错过了自己心怡的公司。前端的基础知识杂且多，并不是理解就ok了，有些是真的要去记。当然了我们是牛x的前端工程师，每天像背英语单词一样去背知识点就没必要了，只要平时工作中多注意总结，面试前端刷下题目就可以了。什么？你问面试题资料在哪里，这不是就在你眼前吗（滑稽te(30deg);Yin Yang(阴阳八卦)
CSS3技巧之形状（椭圆）
csdnxy的博客
12-22 2130
CSS3技巧之形状（椭圆）
纯CSS实现立体感圆盘（立体化按钮），点击有图
祥哥的说
11-01 7607
在线编辑：https://codepen.io/sunnercms/ &lt;div class="inner"&gt; &lt;div class="disc"&gt; &lt;/div&gt; &lt;/div&gt; .inner{ position:relative; width:300px; height:300px; border-radius:150p...
一个简单的呼吸灯效果
tinfengyee的博客
12-14 1280
一个简单的呼吸灯效果 图: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-e...
【CSS】CSS画矩形、圆、半圆、弧形、半圆、小三角、疑问框
热门推荐
LZGS_4的专栏
07-10 8万+
在网页中，经常会用到各种Icon，如果老师麻烦设计狮画出来不免有些不好意思，所以有时候我们也可以用CSS写出各种简单的形状，一来可以减轻他们的负担，二来也可以使用CSS替代图片，提高加载速度。 在网页中，结合CSS能画出来的最基本的形状就是矩形，所以，我们可以在矩形的基础上做出各种变换，得到很多不同的形状。 这次的分享主要用到圆角、边框、定位等知识点（鉴于IE9以上才支持圆角，暂时不考虑兼容问
html5实现圆圈里带一个三角形,CSS制作箭头图标代码(圆，三角形，椭圆)c
05-26
好的，以下是实现圆圈里带一个三角形的HTML和CSS代码： ```html <div class="circle"> <div class="triangle"></div> </div> ``` ```css .circle { width: 50px; height: 50px; border-radius: 50%; background-color: #ccc; position: relative; } .triangle { width: 0; height: 0; border-top: 10px solid transparent; border-right: 20px solid #333; border-bottom: 10px solid transparent; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } ``` 如果需要实现椭圆形的话，可以使用`border-radius`属性设置水平和垂直半径，例如： ```css .circle { width: 100px; height: 50px; border-radius: 50px 25px; /* 其他样式 */ } ``` 以上就是制作圆圈里带一个三角形和椭圆形的HTML和CSS代码。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Friday--星期五

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值