当前位置:首页 > 前端技术 > css绘制直角三角形

css绘制直角三角形

2022年09月16日 22:42:27前端技术7
.tri {
            width: 0; height: 0;
            border-color: red blue red blue;
            border-width: 50px 50px 50px 50px;
            border-style: solid;
     }

 

css绘制直角三角形 _ JavaClub全栈架构师技术笔记


.tri2 {
            width: 0; height: 0;
            border-color: red blue blue red;
            border-width: 50px 50px 50px 50px;
            border-style: solid;
        }

css绘制直角三角形 _ JavaClub全栈架构师技术笔记


.tri3 {
            width: 0; height: 0;
            border-color: transparent red; /*上下颜色 左右颜色*/
            border-width: 0 0 50px 50px;
            border-style: solid;
        }

css绘制直角三角形 _ JavaClub全栈架构师技术笔记

css绘制直角三角形 _ JavaClub全栈架构师技术笔记


.tri4 {
            width: 0; height: 0;
            border-color: red transparent; /*上下颜色 左右颜色*/
            border-width: 0 0 50px 50px;
            border-style: solid;
        }

css绘制直角三角形 _ JavaClub全栈架构师技术笔记


.tri5 {
            width: 0; height: 0;
            border-color: red transparent; /*上下颜色 左右颜色*/
            border-width: 0 50px 50px 0;
            border-style: solid;
        }

css绘制直角三角形 _ JavaClub全栈架构师技术笔记


.tri6 {
            width: 0; height: 0;
            border-color: transparent red; /*上下颜色 左右颜色*/
            border-width: 0 50px 50px 0;
            border-style: solid;
        }

css绘制直角三角形 _ JavaClub全栈架构师技术笔记


        /*五角星 由三个等边三角形拼接而成*/
        #star-five {
            position: relative;
            width: 0; height: 0;
            border-left: 100px solid transparent;
            border-right: 100px solid transparent;
            border-bottom: 70px solid #039ae9;
            transform: rotate(35deg);
            margin: 50px;
        }
        #star-five::before {
            content: "";
            position: absolute; top: 3px; right: -95px;
            width: 0; height: 0;
            border-left: 100px solid transparent;
            border-right: 100px solid transparent;
            border-bottom: 70px solid #039ae9;
            transform: rotate(-70deg);
        }
        #star-five::after {
            content: "";
            position: absolute; top: 6px; right: -96px;
            border-left: 100px solid transparent;
            border-right: 100px solid transparent;
            border-bottom: 70px solid #039ae9;
            transform: rotate(-145deg);
        }

css绘制直角三角形 _ JavaClub全栈架构师技术笔记


更多css绘制的图形请参考:

https://css-tricks.com/the-shapes-of-css/

作者:zbailing
来源链接:https://blog.csdn.net/zbailing/article/details/93975987

版权声明:
1、JavaClub(https://www.javaclub.cn)以学习交流为目的,由作者投稿、网友推荐和小编整理收藏优秀的IT技术及相关内容,包括但不限于文字、图片、音频、视频、软件、程序等,其均来自互联网,本站不享有版权,版权归原作者所有。

2、本站提供的内容仅用于个人学习、研究或欣赏,以及其他非商业性或非盈利性用途,但同时应遵守著作权法及其他相关法律的规定,不得侵犯相关权利人及本网站的合法权利。
3、本网站内容原作者如不愿意在本网站刊登内容,请及时通知本站(javaclubcn@163.com),我们将第一时间核实后及时予以删除。


本文链接:https://www.javaclub.cn/front/42240.html

标签: css
分享给朋友:

“css绘制直角三角形” 的相关文章

如何使用纯 CSS 创建翻牌动画

如何使用纯 CSS 创建翻牌动画

下面的示例向您展示了如何使用纯 CSS 创建翻牌动画。 作者:坚果 公众号:“大前端之旅” 华为云享专家,InfoQ签约作者,阿里云专家博主,51CTO博客首席体验官,开源项目GVA成员之一,专注于大前端技术的分享,包括F...

scrapy css选择器提取a标签内href属性值

 示例Html: <div class='abc'> <a href='https://blog.csdn.net/weixin_41767339'> Hello word! </a> </div&...

HTML-CSS标签属性注释大全

           ★文章有点长,但是我觉得你不用一次性看完,可以收藏一下,在自己的碎片时间里,可以随时拿出来看看。    ★今天把HTML里一些常用的标签也整理了一份,希望对于初学者有...

css中的@media用法总结

1、head标签中引入 //语法: @media mediatype and | not | only (media feature) { css-code; } //也可以针对不同的媒体使用不同的stylesheets: <!--<link rel="st...

CSS

CSS

文章目录 1. CSS 的概念 2. CSS 的作用 3. CSS 与 HTML 的结合方式 4. CSS 格式 5. 选择器 5.1 选择器的作用...

css去除html中a标签的默认样式

html中a标签的默认样式实在是太丑,这简直是对前端程序猿的一种蹂躏!!!所以通常情况下需要去除a标签的默认样式。 以下代码是在a标签的不同状态下去除默认的下划线,如果要修改颜色、字体等,在对应位置添加css样式即可。 /*去除a...

什么是HTML和CSS

什么是HTML和CSS? HTML的定义: 首先来说HTML,HTML中文称为超文本标记语言,从语义上来说,它只是一种是一种标识性的语言,并不是一种编程语言。所以在提及其作用时,只能从语义方面去想,而不能从样式上去想。它其中有许许多多的标签,...

html代码设置span字体颜色,怎么用span css设置div内部分字体颜色?

html代码设置span字体颜色,怎么用span css设置div内部分字体颜色?

本篇文章给大家带来的内容是关于怎么用span css设置div内部分字体颜色,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 用span标签设置div内放一段文字中的部分文字字体颜色方法。 一段文字放在DIV内或P内,当我们设置div或p...

优秀工具推荐:超实用的 CSS 库,样板和框架

优秀工具推荐:超实用的 CSS 库,样板和框架

当启动一个新的项目,使用 CSS 框架或样板,可以帮助您节省大量的时间。在这篇文章中,我编译整理了我最喜欢的 CSS 样板,框架和库,帮助你在建立网站或应用程序时更加高效。   当启动一个新的项目,使用 CSS 框架或样板,可以帮助您节省大量的时间。在这篇文...

js修改css样式的方法,js如何设置css样式?js修改css样式的方法

js如何设置css样式?本篇文章就给大家介绍js设置(修改)css样式的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。 下面我们就给大家介绍使用javascript是如果设置css样式的。 1、直接设置样式(内联样式) 使...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。