前端-使用border边界创建图形

最新推荐文章于 2024-03-27 21:00:11 发布

m0_73347408

最新推荐文章于 2024-03-27 21:00:11 发布

阅读量95

点赞数

文章标签：前端 servlet html

本文链接：https://blog.csdn.net/m0_73347408/article/details/126533620

版权

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

.dysjx{

width: 0;

height: 0;

border-left: 100px solid transparent;

border-right: 100px solid transparent;

border-bottom: 100px solid pink ;

}

.zjsjx{

width:0;

height: 0;

border-top: 50px solid transparent;

border-left: 50px solid pink;

border-right: 50px solid transparent;

border-bottom: 50px solid pink;

}

.zsjx{

width:0;

height: 0;

border-left: 100px solid transparent;

border-right: 100px solid transparent;

border-bottom: 100px solid pink;

}

.tx{

width: 50px;

height: 0;

border-top: 0 solid transparent;

border-left: 50px solid transparent;

border-right: 50px solid transparent;

border-bottom: 100px solid pink;

}

.bttx{

width:0;

height: 0;

border-top: 80px solid transparent;

border-left: 30px solid pink;

border-right: 70px solid transparent;

border-bottom: 20px solid rgb(227, 247, 149);

}

</style>

</head>

<body>

<p>等腰三角形</p>

<p>直角三角形</p>

</body>

</html>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

m0_73347408

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端-使用border边界创建图形

直角三角形正三角形变态图形
复制链接

扫一扫

大前端学习笔记--持续随缘更新

JackieDYH的博客

02-10

1189

目录 0210--前端知识&HTML常用标签 0210--前端知识&HTML常用标签 1、浏览器及内核介绍： chrome谷歌：特点——简洁、快速、安全内核——webkit,Blink 费用——收费 Firefox火狐——Mozilla公司：特点——非盈利、Gecko项目开源内核——Gecko Safari苹果——苹果...

纯 Css 绘制扇形

milijiangjun的博客

04-11

3997

转载自：https://segmentfault.com/a/1190000011981896阅读此文需具备基本数学知识：圆心角、弧度制、三角函数。为实现如下效果呕心沥血：当然你可以拥抱 Svg...在此分享如何纯 Css 打造圆环进度条，只需三步！此物乃 2 + 1 夹心饼干，蓝绿色部分为果酱。显而易见饼干为两个削成了圆形的div，我们重点演示果酱是怎么制作的：如图所示，大扇形由6个小扇...

参与评论您还未登录，请先登录后发表或查看评论

css实现六角星

qq_39039128的博客

09-23

1297

<!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-U...

数学基础 - 第十一章三角形

qq_39499914的博客

11-11

606

11.1 与三角形有关的线段 11.1.1 三角形的边由不在同一条直线上的三条线段首尾顺次相接所组成的图形叫做三角形(triangle). 在图11.1-1中,线段AB,BC,CA是三角形的边、点A,B,C是三角形的顶点,∠A,∠B,∠C是相邻两边组成的角，叫做三角形的内角，简称三角形的角. 以“是否有边相等”,可以将三角形分为两类:三边都不相等的三角形和等腰三角形. ...

css 画扇形

Lyj的博客

03-18

646

画扇形 .div{ width:0; height:0; border-width:50px; border-style:solid; // 到此，会显示正方形 border-radius: 50px; // 显示圆 border-color: #f00 transparent transparent; // 圆的左右下边框设为透明，即为...

css绘画扇形

qq_42535651的博客

10-08

5143

css中绘画半圆形： <div class="semi-sector"></div> .semi-sector { height: 50px; width: 100px; border-radius: 50px 50px 0 0; /* border-radius 要等于圆的半径*/ background-color: red; } css绘画任意角度的扇形：思路：先画一个圆，然后再用 absolute 绝

前端图形之:SVG与Canvas（border、clip-path）

dageliuqing的博客

10-26

773

可缩放矢量图形（Scalable Vector Graphics，SVG），是一种基于 XML（数学）描述的二维的矢量图形，内容可以直接插入网页，成为DOM的一部分，然后用 JavaScript 和 CSS 进行操作。大多数现代浏览器都支持SVG 图形，越来越多的项目在使用SVG图形，简单的像图标，复杂的一些图表Chart也有不少是基于SVG实现的。WebGL是运行在GPU上的，可面向底层显卡编程，可调用底层的接口，实现硬件加速，在2D图形绘制上性能会优于Canvas2D。这里就先简单了解一下，

html5-canvas-border-pixel-progressbar

12-10

HTML5 Canvas Border Pixel Progressbar是一种使用HTML5 Canvas API创建的进度条效果，它将边界像素化，以展示进度。在本文中，我们将深入探讨HTML5 Canvas API，了解如何利用其特性构建这种独特的进度条。首先，...

前端面试题--vue

weixin_44501366的博客

10-17

4970

每个组件都是 Vue 的实例。组件共享 data 属性，当 data 的值是同一个引用类型的值时，改变其中一个会影响其他.Less的简单使用（一）——变量的用法Less是css的扩展，Less不仅与CSS向后兼容，而且它添加的其他功能都使用现有的CSS语法。变量一、变量正常用法（variables）在一个位置控制常用值.less文件中} **

前端学习笔记 - HTML+CSS

fengxm0309的博客

10-07

4709

基础认知网页什么是网页网站是指在因特网上根据一定的规则，使用 HTML 等制作的用于展示特定内容相关的网页集合。网页是网站中的一“页”，通常是 HTML 格式的文件，它要通过浏览器来阅读。网页是构成网站的基本元素，它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页，常见以 .htm 或 .html 后缀结尾的文件，因此将其俗称为 HTML 文件。什么是 HTML HTML 指的是超文本标记语言 (Hyper Text Markup Lang

纯 Css 绘制扇形的方法示例

09-24

本篇文章主要介绍了纯 Css 绘制扇形的方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

咱们不画饼！进来教你画三角形。。。

Sestid的博客

11-20

468

前言先来两个案列吧，原理三角形实现原理：宽度width为0；height为0；（1）有一条横竖边（上下左右）的设置为border-方向：长度 solid red，这个画的就是底部的直线。其他边使用border-方向：长度 solid transparent。（2）有两个横竖边（上下左右）的设置，若斜边是在三角形的右边，这时候设置top或bottom的直线，和右边的斜线。若斜边是在三角形的左边，这时候设置top或bottom的直线，和左边的斜线。实现...

如何通过css实现扇形