CSS 实现三角形.html

已于 2023-09-03 20:23:12 修改
阅读量97 收藏
点赞数
分类专栏： CSS 文章标签： css html 前端
于 2023-09-03 20:22:56 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42193179/article/details/132655020
版权

<!DOCTYPE html>

<html lang="zh-CN">

  <head>

    <meta charset="UTF-8" />

    <title>小三角</title>

    <style>

      /*

        https://www.w3school.com.cn/cssref/pr_border-color.asp

      */

      div {

        width: 0;

        height: 0;

        border: 6px solid;

        /* 上边框是蓝色，右左边框是透明，下边框是透明。*/

        border-color: #5190ac transparent transparent;

      }

    </style>

  </head>

  <body>

    <div></div>

  </body>

</html>

学无止境慢慢来
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
用CSS制作三角形和按钮的简单实例
12-13
我先说如何制作三角形吧，相信大家在平时逛网站的时候都会看到一些导航栏中的三角形吧，比如说：  网易首页的头部菜单栏中，也会有这样的三角形 当鼠标经过时，三角形会垂直翻转，如下 现在我分享制作三角形的...
【前端素材】模板-多种实用三角形.zip
04-04
CSS 动画：使用 CSS 属性（如@keyframes、transition、transform等）来实现动画效果。这种方式简单易用，适合实现简单的动画效果，如过渡、旋转、缩放等。 JavaScript 动画：通过 JavaScript 操作 DOM 元素的样式...
使用CSS实现小三角形效果【附实例】
01-19
使用CSS实现小三角形效果【附实例】: 建议:尽可能的手写代码，可以有效的提高学习效率和深度。 在众多的网页效果中，都有小三角形效果的应用，能够增加特定应用的美观度，下面就给出一段实例代码，里面介绍了两种...
css写的三角形欣赏
09-25
今天闲着蛋疼 随便修几个三角形
布局和排版教程 纯css3实现图片三角形排列
09-25
图片的布局和排版非常重要，纯大部分网页或多或少都会用到图片。特别是对于图片较多的网页，今天要给大写带来一款纯css3实现图片三角形排列。适合一系列的图片，需要的朋友可以参考下
CSS div+CSS实现表格.html
热门推荐
weixin_42193179的博客
12-14 1万+
序号姓名年龄序号姓名年龄
css 把一张图片 img 沾满其父元素，而不产生滚动条.txt
weixin_42193179的博客
12-09 486
1.background-image background-image:url(image/a.jpg); background-size:contain; width: 800px; height: 450px; 可以在某个块级元素内完全展示该图片，而不出现滚动条。 2. position img.background { position: absolute; width...
css span盒模型知识点.txt
weixin_42193179的博客
03-25 432
1. <span>用地类别</span> span{ display: inline-block; border:1px solid #AEAEAE; width:160px; padding:4px 5px 0px; } 当span是以上情形时，span的内容宽度为148px, 左右内边距5px,左右border1px， 即148 + 5...
css :first :last.txt
weixin_42193179的博客
11-18 390
:first :last，选择html文档中的第一个某元素。
css text-overflow显示省略号.html
weixin_42193179的博客
03-14 361
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>省略号</title> <style> /*单行文本的溢出，显示为...。*/ .pl { ...
css a标签:link:visited:focus:hover:active.html
weixin_42193179的博客
10-15 251
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>a:link:visited:focus:hover:active</title> <style> /*参考：https://blog...
css border: border-width border-style border-color;.txt
weixin_42193179的博客
09-17 223
border: border-width border-style border-color; 1. border-width 参考：https://www.w3school.com.cn/cssref/pr_border-width.asp 定义和用法 border-width 简写属性为元素的所有边框设置宽度， 或者单独地为各边边框设置宽度。 只有当边框样式不是 none 时才起作用。 如果...
css 关于 html 在不同分辨率的显示器上的协调.txt
weixin_42193179的博客
12-16 175
在设置 html 的样式时，考虑不同的显示器有不同的分辨率， 暂以 1920 x 1080 px 来布局。 因为市面现行的 主流分辨率是这样。新显示器的分辨率可能更高。 在关键（内容）部分，即，需要严丝合缝衔接的部分，建议使用像素为单位， 这样衔接标准统一，在不同分辨率的显示器上的衔接效果相同。 在空白部分，比如间距，可以使用百分比，这样又兼顾了整体的比例。 ...
css 屏幕背景图片 img.html
weixin_42193179的博客
09-16 103
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>屏幕背景图片</title> <style> /*把一张图片铺满整个屏幕（适应所有尺寸的屏幕），且不重复，不隐藏的方法。*/ ...
css 知识点.txt
weixin_42193179的博客
11-28 91
1.当把一个元素的值设为空 ""时，其值就是其默认值。 实例： $("#centerDiv").css({ position: "", height: "100%", width: "100%" });
css利用transform:skew()属性画一个大屏的背景斜面四边形特效
最新发布
Demon's blog
04-27 99
使用css transform function中的skew()方法实现画其中一个斜面，然后调整背景色实现ß。在工作工程中需要写一个如下的大屏背景，是由几个斜面做成的效果。2. 添加transform属性。4. 重复三个，注意背景色不一样。3. 添加渐变背景色和阴影。
vuetify3.0+tailwindcss+vite最新框架
qq_43813351的博客
04-23 323
【代码】vuetify3.0+tailwindcss+vite最新框架。
js动态设置css主题(Style-setProperty)
zarek_jiamu的博客
04-27 113
定义的参考色，在开发的过程中希望后端人员能遵循// 用于按钮点击颜色num
css实现三角形
05-26
可以使用CSS的border属性来实现三角形。具体方法如下： 1. 先创建一个正方形的div元素，设置宽度和高度相等。 2. 设置border属性，将三条边的颜色设为透明，只设置一个边的颜色为需要的颜色，边框大小可以根据需要...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值