程序员经验分享-hwhale

纯css画三角形

2023-11-10

思路：用border实现。

<!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-UA-Compatible" content= "ie=edge" >
< title >Document </ title >
< style >
.triggle {
width: 0;
height: 0;
border: 100px solid transparent;
border-left: 100px solid red;
}
< / style >
</ head >

< body >
< div class= "triggle" ></ div >
</ body >

</ html >

100是三角形的高，效果如下：三角形底边长200高100


相应的，若是倒三角形，则设置border:100px solid transparent;border-top:100px solid red;即可.

画一个左下角的正三角形，代码如下：

<!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-UA-Compatible" content= "ie=edge" >
< title >Document </ title >
< style >
.triggle {
width: 0;
height: 0;
border: 100px solid transparent;
border-left: 100px solid red;
border-bottom: 100px solid red;
}
< / style >
</ head >

< body >
< div class= "triggle" ></ div >
</ body >

</ html >

效果图：

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

css

纯css画三角形 的相关文章

  • 无法正确显示行

    我应该在这个问题的开头说我完全没有 html css javascript 背景 所以请对我宽容点 如果我使用了错误的术语或者问了一个愚蠢的问题 没有提供足够的信息 请抱歉 我正在尝试让一个可扩展的表工作 通过阅读论坛线程 教程 将 nex

  • 删除特定数据表上的所有边框

    我需要使用 PrimeFaces 隐藏一个数据表的所有边框 而不是全部 我尝试了很多事情 但没有人奏效 有谁知道该怎么做 我已将以下样式 单独 应用于ui datatable class border hidden important bo

  • 在 Android 上禁用标注（上下文菜单）

    在网络应用程序中 我需要禁用移动浏览器在触摸并按住 长按 触摸目标 例如 img 或链接 我已经在使用了 webkit touch callout none 它在 iPhone 和 iPad 上运行良好 但似乎不适用于 Android 在

  • html 电子邮件内的背景图像 css - Gmail 不支持

    我想向我的用户发送如下所示的带有背景图像 css 的 html 正文电子邮件 div style width 500px height 1000px background color black background image none

  • div 中的中心文本？

    我有一个div 30px高和500px宽的 这div可以包含两行文本 一行在一行 并相应地设置样式 填充 但有时它只包含一行 我希望它居中 这可能吗 要水平居中 请使用text align center 要垂直居中 只能使用vertical

  • 如何在其他div id的悬停中使用div显示块

    如何打开div悬停时标记href tag 这是我在悬停 href 标签上显示 div 标签的代码 Services is id of href tag Services is id of div tag Service hover Serv

  • CSS 继承、别名和其他很酷的东西

    有一天 我随机浏览网页 发现了一些程序 可以让你编写 CSS 别名和其他很酷的东西 我现在不记得了 举个例子 我记得你可以这样做 myclass background color red greenfont 其中 greenfont 在其他

  • 导航栏下拉菜单（折叠）在 Bootstrap 5 中不起作用

    我在尝试使用以下命令创建响应式菜单或下拉按钮时遇到问题Bootstrap 5一切似乎都正常 导航图标和下拉图标出现 但它不起作用 当我单击nav图标或dropdown按钮 无dropdown menu apears 我想特别提到的是 我还包

  • 如何使使用 css 调整大小的图像在 IE 中看起来不错？

    当使用 css 宽度 高度或属性宽度 高度缩放图像时 IE6 和 IE7 无法很好地缩放网页中的图像 我不确定它默认使用哪种算法 但这不好 在这些浏览器中缩放时 缩放图像会显示锯齿伪影 幸运的是 有一种方法可以通过简单的 css 规则强制

  • 如何通过单击链接来更改 div 的内容？

    这是我的网页的 修改后的 jsfiddle 它还有很多 而且定位是正确的 与此相反 http jsfiddle net ry0tec3p 1 http jsfiddle net ry0tec3p 1 a href class btn1 st

  • CSS 到底如何计算相对尺寸

    我想更好地理解某些 CSS 行为 这与具体问题无关 我只是在调试网站时遇到的 让我们在固定位置的 div 中放置一个全宽图像 div img style width 100 src https via placeholder com 150

  • css3按钮背景颜色无限过渡

    有没有办法仅使用 css3 使按钮的背景颜色从灰色渐变为蓝色 然后又回到灰色 一个很好的例子是默认操作按钮是可可 我知道这可以在 javascript 中完成 但我宁愿只使用 css 来完成此操作 您好 我已经通过 CSS3 动画制作了按钮

  • @media语法/可能的组合

    我见过其中一些 media print media screen handheld print projection media all media all and property value media screen and prope

  • 悬停此元素时隐藏元素后的伪元素

    我的菜单垂直放置在页面左侧和菜单之间 li 我有一个 after那是一个分隔符 我想要的是当我悬停元素本身 如果它是第一个元素 时隐藏 after 元素 或者当它是中间元素时隐藏上面和底部的元素 如果它是最后一个子元素 则隐藏 after前

  • Angular - CSS - 自定义类型=文件输入，如何使用按钮而不是标签？

    我制作了一个类型为 file 的自定义输入字段 因为我不喜欢默认的输入字段 为了实现这一目标 我做了

  • 网站的主体和元素固定在 980px 宽度上，不会缩小

    我试图在 Rails 应用程序顶部启动前端 仅 HTML CSS 页面 但在使用 320px 视口时遇到问题 有些元素不会按比例缩小 我不明白为什么 我已经完成了检查元素 为各种元素提供了max width 100 and or width

  • 在移动设备上滚动

    这个问题更多的是一个建议研究 我确实希望它对其他人有帮助 并且它不会关闭 因为我不太确定在哪里寻求有关此事的建议 在过去的 6 个月里 我一直在进行移动开发 我有机会处理各种设备上的各种情况和错误 最麻烦的是滚动问题 当涉及到在网站的多个区

  • HTML 锚点，禁用样式

    我有一些 html 锚链接代码 与文档的其余部分不同 我希望它看起来不是链接 有没有一种简单的方法可以禁用由于将文本包装在锚标记中而引起的样式更改 而不必强行使其相同 即 如果我更改正文字体样式 我不必也更改其他一些 link东西 将颜色设

  • CSS溢出文本显示在几行中，没有断字

    我有一些长文本显示在 div 中 该 div 具有固定的宽度和高度 我希望文本显示在几行上 作为 div 高度 并且句子单词不会中断 一行中的单词前缀和下一行中的继续 此外 我想在末尾添加省略号最后一句话 CSS white space n

  • 在 Nexus 7 2013 上更改方向时 CSS 媒体查询不起作用

    我目前正在我的笔记本电脑 台式电脑和 Nexus 7 2013 上测试 CSS 媒体查询 除了 Nexus 7 之外 它们在台式机和笔记本电脑上都运行良好 当我更改方向时 除非刷新页面 否则样式不会应用 例如 以纵向模式握住设备时 页面正常

随机推荐

  • idea工具基础配置（Mac）

    用于个人在初次使用idea时 做一些基础配置 便于后续快速开发 此文章不涉及快捷键设置 若需要快捷键设置可查看其他链接 idea Mac 快捷方式设置 快捷键改为eclipse 1 idea背景颜色 intelliJ IDEA gt pre

  • （每日一练）MATLAB数据拟合

    今天就的学习内容是数据拟合 数据拟合也称为曲线拟合 是一种把现有数据透过数学方法来代入一条数式的表示方式 科学和工程问题可以通过诸如采样 实验等方法获得若干离散的数据 根据这些数据 我们往往希望得到一个连续的函数 也就是曲线 或者更加密集的

  • SpringMVC学习笔记

    springMVC简单入门 快速搭建 pom xml依赖

  • JQuery DOM

    操作文本 常用方法 代码实现 div 我是div div

  • 用Python赚钱的4个大招，女程序员做副业躺赚

    关于穷 去年有了一个更学术的说法 隐形贫困人口 就是因为有太多 种草达人 让我们为了物质生活超前消费 再加上不理财的话 那简直是雪上加霜 看到知乎上面最近有一个很火的问题 90后的你 现在拥有多少存款 你会看到人生百态 有人父母双亡 白手起

  • Docker : Docker镜像的分层结构

    1 美图 2 概述 3 base镜像 base 镜像简单来说就是不依赖其他任何镜像 完全从0开始建起 其他镜像都是建立在他的之上 可以比喻为大楼的地基 docker镜像的鼻祖 base 镜像有两层含义 不依赖其他镜像 从 scratch 构

  • Github 如何设置 master 为默认分支

    起因 github 新版本上线之后 原默认分支为 master 现在统一改为了 main 我不禁产生疑问 为什么要改呢 原因大概是漂亮国农奴历史遗留问题导致的 master 奴隶主 slaver 奴隶 解决方法 我们已经习惯以 master

  • 算法：优先队列-理论

    目录 优先队列 我们平时比较常见的优先队列的场景有什么 优先队列的实现机制 java的优先队列是怎么实现的 优先队列 我们先回忆一下什么是队列 队列 一种先进先出的数据结构 主要关注点在于先入的元素

  • 【初级计量经济学】内生性问题——工具变量法（Stata实现）

    目录 1 数据来源以及变量详目 1 1变量一览表 1 2数据描述性统计 2 模型设定以及初步回归 2 1 OLS 模型 2 2 回归结果 2 3 回归结果分析 内生性问题校正 1工具变量法 2 两阶段最小二乘 3 豪斯曼检验 stata手工

  • 智能机器人用什么语言编程

    智能机器人用什么语言编程 对于很多家长们来说 他们的任务之一就是培养孩子的学习 很多的家长在培养孩子的学习方面可以说是十分的重视的 会给孩子选择一些能够有利于孩子成长的课程 就拿现在很多的家长想要孩子去学习机器人编程的课程来说 有的家长对于

  • servlet / jsp 学习——java，关系，区别，核心概念，代码例子

    互联网三大基石 HTTP HyperText Transfer Protocol 传输数据 URL Uniform Resource Locator 定位数据 HTML HyperText Markup Language 显示数据 serv

  • 类的构造函数和析构函数

    1 把对象的初始化工作放在构造函数中 把清除工作放在析构函数中 当对象被创建时 构造函数被自动执行 当对象消亡时 析构函数被自动执行 这下就不用担心忘了对象的初始化和清除工作 2 构造函数 析构函数与类同名 由于析构函数的目的与构造函数的相

  • CAD——MV视口与图层

    CAD MV视口与图层 MV视口 MV 空格 CAD MV视口锁定比例 Z S 1 nXP 图层 LA 空格 MV视口 MV 空格 MS 空格 表示进入MV视口空间 PS 空格 表示退出MV视口空间 操作 打开布局 gt MV 空格 gt

  • Flask 实现分页展示数据（简单套路）

    简单方法套路 套用模板 定义宏 在templates里新建一个 macros html 代码如下 macro pagination widget pagination endpoint ul class pagination ul

  • golang开发的准备 - gvm（go版本管理软件）的使用

    概述 gvm软件用于go版本的管理 主要的功能为go版本的查看 下载安装和切换 一 go版本的查看 gvm listall 命令用于查看可以下载安装的go版本 shane ubuntu gvm binscripts gvm listall

  • java Map集合的使用

    Map集合的使用 Map的特点 Map接口的常用实现类 Map集合的常用方法的使用 1 添加map集合元素 2 删除map集合元素 3 替换map集合元素 4 集合中是否包含指定的key和value 5 分别获取map集合中所有的key和v

  • Python中CV2及PIL库无法安装解决方式

    ERROR Could not find a version that satisfies the requirement cv2 from versions none ERROR No matching distribution foun

  • 关于DDOS的几个误区，你知道几个？

    在竞争激烈的互联网领域 总有一些组织和个人利用DDoS攻击进行破坏 从而达到自己的目的 对于DDoS攻击 大部分人的认知来源于新闻报道 新闻报道这种方式在普及DDoS危害性的同时 也会不自觉地引入一些误区 下面小墨就带大家来看看关于DDoS

  • Git常用操作总结，经常遇到但是记不住

    今天分享一些我平时在使用git时经常会遇到的几个问题 由于命令一直记不住 每次都得去搜索贼麻烦 所以今天想着整理一下分享出来 希望能帮助到也经常遇到这些问题的你 Git remote 使用总结 使用场景 新建一个git仓库并与远程关联 初始

  • 纯css画三角形

    思路 用border实现 lt html lang en gt lt head gt lt meta charset UTF 8 gt lt meta name viewport content width device width ini

热门标签