各种demo：css实现三角形，css大小梯形，svg使用

最新推荐文章于 2024-06-01 07:27:22 发布
最新推荐文章于 2024-06-01 07:27:22 发布
阅读量2.3k 收藏 2
点赞数

各种demo：

1、css实现正方形

思路：width为0；height为0；使用boder-width为正方形的边长的一半，不占任何字节；border-style为固体；border-color为正方形的填充色。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .triangle{
                width: 0;
                height: 0;
                border-width: 30px;
                border-style: solid;
                border-color:#e66161; 
            }
        </style>
    </head>
    <body>
        <div class="triangle"></div>
    </body>
</html>

图形

 

 

2、css实现三角形

思路：宽度width为0；height为0；border-width为直角三角形斜边的一半；border-color里有四个颜色属性，第一个为上--直角三角形内充填充色，第二个为右--直角三角形内填充色，第三个为下--直角三角形内填充色，第四个为左--直角三角形内填充色。

代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .triangle{
                width: 0;
                height: 0;
                border-width: 30px;
                border-style: solid;
                border-color: #000000 transparent transparent transparent;
            }
        </style>
    </head>
    <body>
        <div class="triangle"></div>
    </body>
</html>

图形

代码：

.triangle{
                width: 0;
                height: 0;
                border-width: 30px;
                border-style: solid;
                border-color: #000000 #000000 transparent transparent;
            }

图形

 

代码：

.triangle{
                width: 0;
                height: 0;
                border-width: 30px;
                border-style: solid;
                border-color: #000000 #f50303 transparent transparent;
            }

图形

 

 

3、css实现正方形外梯形

思路：还是之前的思路，width为20；高度为20；梯形的短底边为div的width；梯形的长边=width+border-width*2；

代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .triangle{
                width: 20px;
                height: 20px;
                border-width:30px;
                border-style: solid;
                border-color: #000000 transparent transparent transparent;
            }
        </style>
    </head>
    <body>
        <div class="triangle"></div>
    </body>
</html>

图形：

 

 

代码：

.triangle{
                width: 0;
                height: 0;
                border-width: 30px;
                border-style: solid;
                border-color:#e66161 #f3bb5b #94e24f #85bfda;
            }

 图形：

 

 4、css实现这个图形

 

思路：利用两个三角形进行拼接，一个是背景色，一个是边框色，然后利用定位重叠在一起，定位要相差一个像素。

代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .box{
                position: relative;
                width: 240px;
                height: 60px;
                line-height: 60px;
                background: #e9fbe4;
                box-shadow: 1px 2px 3px #e9fbe4;
                border: 1px solid #c9e9c0;
                border-radius: 4px;
                text-align: center;
                color: #0c7823;
            }
            .triangle-border{
                width: 0;
                height: 0;
                border-width: 10px;
                border-style: solid;
                position: absolute;
                left: 30px;
                overflow: hidden;
                
            }
            .border{
                bottom:-20px;
                border-color: #C9E9C0 transparent transparent transparent;
            }
            .background{
                bottom: -19px;
                border-color: #E9FBE4 transparent transparent transparent;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <span>我是利用border属性实现</span>
            <div class="triangle-border border"></div>
            <div class="triangle-border background"></div>
        </div>
    </body>
</html>

 

 

 5、css实现

 

long0801
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS3+SVG实现的时间沙漏动画特效特效代码
03-20
CSS3+SVG实现时间沙漏特效是一款逼真的时间漏斗CSS3动画特效代码，可自动翻转，本段代码适应于所有网页使用，有需要的朋友们可以前来下载使用。本段代码兼容目前最新的各类主流浏览器，是一款非常优秀的特效源码。
Demo_CSS:CSS特效练习
03-15
本实践项目"Demo_CSS:CSS特效练习"提供了一个学习和提升CSS技能的平台。 在这个项目中，你可以通过一系列的示例来了解和掌握CSS的各种特效。首先，我们来看一下CSS的基本结构。CSS由选择器和声明组成，选择器指向你...
CSS画出各种三角形如等边三角形
12-09
下面的代码将演示三角形如何产生 HTML 复制代码代码如下: <div class=”triangles”></div> LESS 复制代码代码如下: .triangles { border: 50px solid transparent; border-top-color: #0075a9; border-right-color: #a89a00; border-bottom-color: #19a800; border-left-color: #a90000; width: 0; height: 0; } 表现情况  单个三角形 HTML 复制代码代码如下: <div class=
用svg path 绘制梯形
u012632105的博客
09-01 570
元素外，你也可以在 JavaScript 中通过创建 SVG 元素来绘制梯形。元素，还是在 JavaScript 中创建 SVG 元素，都可以轻松地绘制出梯形。你可以根据需要调整坐标点的位置和顺序，来实现不同形状的梯形。元素中，并将整个 SVG 元素添加到 HTML 页面的。元素，并设置宽度和高度。具体来说，我们先移动到左下角点。在这个示例中，我们先创建了一个。在这个示例中，我们使用了一个。表示从当前点连接到指定的点，表示连接到起始点，闭合路径。表示移动到指定的坐标点，，然后连接到右下角点。
JS数组怎么去重？| JavaScript中数组去重的14种方法
最新发布
青春木鱼的博客
06-01 1876
JS数组怎么去重？JavaScript中数组去重的13种方法，甚是详细，遇到数组去重问题时，可翻阅查看对应的去重方法
用svg画一个梯形角标
热门推荐
主要领域：前端开发
12-21 1万+
活不多说，直接上代码。 <div class="status0" > <svg class="rect" width="120px" height="200px"> <polygon points="50,0 100,0 125,30 125,80 " class="pp"/> </svg...
分享一个使用svg画的切角梯形边框
lianflower的博客
03-08 564
有个缺点：      当容器的高度太小时，显示会有问题，例如设置.trapezoid选择器的高度为15%后，如下： 如果哪位大佬知道该怎样解决这个问题，还请赐教一下:) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style&g.
css实现多边形和梯形盒阴影技巧
09-24
在这些情况下，可以考虑使用SVG图形或CSS clip-path等技术来创建更复杂的形状和阴影。 总的来说，CSS虽然在基础样式方面提供了丰富的功能，但在处理特殊效果时，往往需要一些创意和实验。理解CSS的工作原理并灵活...
css实现三角形.zip
03-06
在网页设计中，CSS（Cascading Style Sheets）是一种强大的样式表语言，用于定义HTML或XML（包括如SVG、MathML等各种XML方言）文档的呈现。这个“css实现三角形.zip”压缩包文件包含了如何利用CSS来创建不同方向的...
使用CSS3实现SVG路径描边动画效果入门教程
12-14
本教程将介绍如何利用CSS3实现SVG路径的描边动画效果，无需依赖JavaScript，完全使用CSS来完成。首先，我们要理解SVG中关于描边（stroke）的一些基本属性。 1. **描边颜色（stroke）**：这是SVG中最关键的属性之一...
CSS3 SVG 画一个三角形
qq_45487080的博客
12-31 3407
css3 svg 画一个三角形
H5+svg 实现左边图片右边文字描述的梯形微名片
朝花夕拾的博客
07-10 1017
先上效果图 源码分享 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>css实现div边框斜角</title> <style type="text/css"> .labels { display: inline-block; display: inline-flex; color: #fff; /*line-heig...
CSS三角形形状及大小的设置
weixin_30614109的博客
06-13 374
画出来是由四个三角形组成的四边形 四个三角形相交的点到各边的垂线就是border设置的宽度 想要什么样的三角形就看数学了 <div id="test"> <div id="triangle1"></div> <div id="triangle2"></div> </div> #test{ ...
css 修改三角形大小_css实现三角形
weixin_35996612的博客
12-31 321
最近的一个项目页面中，有很多三角形icon，在不考虑IE兼容性下，使用了css实现三角形，记录一下代码。1、实心三角形，利用transparent实现(1)设置线条宽50px，div 宽高0.triangle{width:0px;height:0px;border-right:100pxsolidred;border-left:100pxsolidblue;border-top:1...
梯形
gengtianbo的博客
05-31 233
自定义viewpublic class MyThereColorView extends ViewGroup { public MyThereColorView(Context context) { super( context ); } public MyThereColorView(Context context, AttributeSet attrs...
【CSS+Canvas+SVG】前端实现三角形的三种方法
TTong_190502的博客
05-11 280
利用CSS+Canvas+SVG实现三角形的三种方法
CSS实现不同的图形（三角形、正方形、圆形、平行四边形）
weixin_34344677的博客
11-23 258
一共收集整理了图形20个，比较实用，同时也为了熟悉CSS的代码。整合了一下，有错误欢迎指出。 1.正方形 #square { width: 100px; height: 100px; background: red;}2.长方形 #rectangle { width: 200px; height: 100px; background: red;}3.左...
css实现三角形和正方体
qq_47161328的博客
08-11 264
三角形： .triangle { width: 0px; height: 0px; border-width: 100px; border-style: solid; /*定义的是实现边框*/ border-color: transparent blue blue transparent; } 正方体： <div class="box"> &l
前端开发学习笔记：CSS基础入门
1. **样式定义**：CSS用于定义HTML或XML（包括如SVG、MathML等各种XML方言）文档的视觉呈现，如字体、颜色、布局等。 2. **样式存储**：样式通常存储在外部的CSS文件中，也可以在HTML文档的`<head>`部分定义为内部...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值