用css画三角形和圆形

已于 2022-04-04 18:51:31 修改
阅读量332 收藏 1
点赞数
分类专栏： css 文章标签： css
于 2021-08-06 18:10:22 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/SSophia/article/details/119460213
版权

1.这个是顶点向上的三角形.
在这里插入图片描述
在这里插入图片描述
2. 如果是顶点向下的三角形样式:border-width:28rpx 28rpx 0 28rpx (自定义边框的宽度)
border-color:red transparent transparent
在这里插入图片描述

3.如果是顶点向左的三角形 border-width:28rpx 28rpx 28rpx 0
border-color:transparent red transparent 或 border-color:transparent red transparent transparent
在这里插入图片描述
4.如果是顶点向右的三角形
border-width:28rpx 0 28rpx 28rpx
border-color:transparent red transparent 或者 border-color:transparent red transparent transparent
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

成长中的向日葵
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
用CSS画三角形、圆、圆角
摆渡人
03-09 940
用CSS画三角形 利用css盒子边框特性画三角形。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body { background-color: #82...
CSS3 画基本图形，圆形、椭圆形、三角形等
09-27
在CSS3中，绘制基本图形是一项非常实用的功能，它允许开发者使用纯CSS创建各种形状，如圆形、椭圆形、三角形、平行四边形、梯形、六角星以及五角星等，无需借助图像编辑软件。下面我们将详细介绍如何利用CSS3实现...
CSS画圆和三角形
hexiyuanhecy的博客
11-06 390
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;CSS画图形&lt;/title&gt; &lt;style&gt; #circle{ width: 200px; height: 20
css画圆和三角
Arlisol的博客
03-05 394
1. css画园 代码： .circle { width: 100px; height: 100px; background: #C6E2FF; border-radius: 50px; } 效果： 2. css画三角 代码： .triangle { width: 0; height: 0; border-left: 50px solid...
css实现圆、三角形
断了的弦的博客
09-16 464
  &lt;div class="circular"&gt; circular &lt;/div&gt; * { padding: 0; margin: 0;} .circular{ width: 200px; height: 200px; border: solid 1px black; border-radius: 100%; } &l...
通过CSS画出三角形和圆形
weixin_45142754的博客
09-03 124
通过CSS画出三角形和圆形
用CSS制作三角形和按钮的简单实例
12-13
本文将详细讲解如何使用CSS制作三角形和按钮的实例。 首先，我们来探讨如何用CSS制作三角形。这个技巧是利用了边框（border）的特性。在HTML中创建一个没有宽高（width和height为0）的元素，然后给它设定不同的边框...
一波CSS制作的三角形和圆形小按钮示例
01-19
参考了天猫、微博等网站的做法，用纯html和css实现，效果还是不错的。以下是成果，兼容主流浏览器，包括ie6。 CSS Code复制内容到剪贴板 <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN ...
CSS代码实现三角形和饼图
09-22
在CSS中，三角形和饼图的实现是利用了边框和透明度的特性。首先，我们来看如何用CSS创建三角形。 三角形的创建基于CSS的边框样式，特别是利用了非对称边框来制造形状。在给定的例子中，`.triangle` 类有四个不同的...
css实现三角形、圆形
qq_41818857的博客
01-05 664
css实现三角形、圆形 1、实现圆形的思路：正方形，圆角50% 代码如下： <style> div{ width: 200px; height: 200px; border-radius: 50%; background-color: red; } &lt...
css如何画一个三边形,如何用css3画三角形和圆形
weixin_39534978的博客
08-04 349
通过CSS样式可以控制网页中各个元素的显示方式，通过CSS样式可以在网页中画出一个三角形，圆形等形状。(了解更多CSS知识，请学习CSS视频教程)CSS画三角形方法实现三角形的绘制很简单。第一步：新建一个元素，随便什么元素，不过我习惯性的会用块元素来做。如果行内元素就display:block它。第二步：为盒子添加样式。1.向上的三角形.kailong{width:0;height:0;borde...
CSS 三角形与圆形
S_mile1992的博客
12-29 174
1. 概述 1.1 说明 通过边框(border)的宽度与边框圆角(border-radius)来设置所需的三角形与圆形。 1.2 边框 　　宽高都为0时，边框设置的不同结果也不同，如下： 　　1.四个边框都为10px的实线时，页面上会显示出一个宽高都为20px(边框组织起来的)的正方形 .div1{ width: 0; ...
css 圆，半圆，三角，梯形
oYuLian的博客
12-17 1055
&lt;!DOCTYPE html&gt; &lt;html lang="zh-CN"&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt; &lt;meta
如何用css实现弧度圆角?三角形以及圆形
子钦加油的博客
11-24 1584
用css画矩形圆角 ，需要使用到border-radius这个属性，下图四角圆，代码显示如下：border-radius:60px; width:360px; height:200px; border:#900 1px solid;margin:20px 20px; 也可以通过控制border-radius的属性，将左上角为弧形和右下角为弧形，主要为border-top-left...
html 带弧度的三角形怎么写的,带圆角三角型的css实现
weixin_28432777的博客
06-05 1028
前言目标实现效果图如下：实现.triangle{display: inline-block;font-size: 0;overflow: hidden;}.triangle:before{content: "";position: relative;display: inline-block;border: 25px solid transparent;}.triangle-up{position...
html 带弧度的三角形怎么写的,css实现带圆角三角型的示例代码
weixin_39638188的博客
06-05 336
前言目标实现效果图如下：实现.triangle{display: inline-block;font-size: 0;overflow: hidden;}.triangle:before{content: "";position: relative;display: inline-block;border: 25px solid transparent;}.triangle-up{position...
css 画圆形和三角形、边框的表现形式
黄彪博客
12-28 386
文章目录文章参考圆形三角形 文章参考 纯CSS画的基本图形（矩形、圆形、三角形、多边形、爱心、八卦等） 圆形 原理描述： 设置div的高度和宽度是一致的，画出正方形 然后再利用border-radius转为圆形 由于块状元素是占一行，因此将元素改为 inline-block <span class="point" style="background: #77DC7E;margin-r...
CSS实现圆角，三角，五角星，五边形，爱心，12角星，8角星，圆，椭圆，圆圈，八卦
wuyawei126的专栏
04-04 592
CSS实现圆角，三角，五角星，五边形，爱心，12角星，8角星，圆，椭圆，圆圈，八卦等等 新出的html5新增了不少标签，性能更强，原来的很繁琐的功能几个标签就能实现，同时CSS3也推出，更是一大亮点，下面是css3的一切用法，在此总结一下，以供需要的朋友们，总共30个例子 1.长方形 #Rectangle{ width: 200px; height: 50px; bac
css 圆形 半圆 弧形 三角等
一只会喊666的咸鱼的博客
07-25 1212
首先，先规定一个div的样式 div { width: 200px; height: 200px; background-color: red; } 1.圆形 原理：四个角都是圆角：四个角的取值为50% .circle { border-radius: 50%; /*border-radius圆角的四个值按...
给我几个好用的css动画网站和css好看的边框网站
最新发布
06-09
4. CSS Border-Radius：提供了大量的 CSS 圆角边框样式，可以实现各种形状的圆角边框，包括圆形、椭圆形、三角形等。 5. CSS Border-Image：可以使用图片作为边框样式，支持平铺、拉伸、缩放等操作。 6. CSS3 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值