首页 > 其他分享 >怎么样用css样式实现一个三角形?

怎么样用css样式实现一个三角形?

时间:2023-04-06 22:32:40浏览次数:35  
标签:样式 20px solid 三角形 border transparent css

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>如何使用div+css制作一个三角形</title>
</head>
<body>
    <!-- 建立div标签,并定义class类名 -->
    <div class="triangle"></div>
    <!-- 写style样式,以标签的形式来进行css样式的编写,类型是text/css -->
    <style type="text/css">
    .triangle{
    	width: 0;
      height: 0;
      /* border--第一个参数:大小,第二个参数:类型,实线、虚线;第三个参数:颜色 transparent:透明色 */
      border-left: 20px solid transparent;
      border-right: 20px solid transparent;
      border-bottom: 40px solid green;}
			</style>
</body>

</html>

直接复制代码就可以使用css代码实现一个三角形。

标签:样式,20px,solid,三角形,border,transparent,css
From: https://blog.51cto.com/u_15278199/6174232

相关文章

  • 如何将 css 从 Application bundle 资源中剥离出来
    为了提高Angular加载性能,一种思路就是按需加载CSS样式表,而不是把它们打包到applicationbundle中去。Web应用的ApplicationBundle是一个包含所有应用程序代码和资源的文件集合,它们被打包在一起以便于部署和分发。ApplicationBundle通常包含HTML、CSS和JavaScript......
  • 用CSS一分钟写出打字动画
    HTML<div>没有空白的人生,永远都不会有心灵的宁静和精神的愉悦。</div>CSS3*{margin:0;padding:0;box-sizing:border-box;}body{text-align:center;display:flex;justify-content:center;align-items:center;}div{width:390p......
  • 实现和CSS一样的easing动画?直接看Mozilla、Chromium源码!
    前言在上一篇丝滑的贝塞尔曲线:从数学原理到应用介绍贝塞尔曲线实现动画时给自己留了一个坑,实现的动画效果和CSS的transition-timing-function:cubic-bezier差别较大,如下图所示,红色为Linear、绿色为CSS的cubic-beizer、蓝色为自己实现的cbezier。本着有坑必填的原则,直接把Mozilla......
  • css自定义复选框和单选框
    <!DOCTYPEhtml><html><head><metacharset="UTF-8"><title></title></head><styletype="text/css">*{margin:0;padding:0;box-sizing:border-box;}......
  • React的行内样式与CSS
    如何为组件添加CSS的class?传递一个字符串作为className属性:render(){return<spanclassName="menunavigation-menu">Menu</span>}CSS的class依赖组件的props或state的情况很常见:render(){letclassName='menu';if(this.props.isActive)......
  • CSS笔记(待完善)
    CSS笔记css权重ID(100)>class(10)>element(1)css最高权重!important块元素(block)可以设置宽度和高度,独立成行。h1~h6、p、div、ul、li行内元素(内联元素、块级元素)(inline)不可以设置宽度和高度,不独立成行a、span行内块元素(inline-block)可以设置宽度和高度,不独立......
  • python-爬虫-css提取-写入csv-爬取猫眼电影榜单
    猫眼有一个电影榜单top100,我们将他的榜单电影数据(电影名、主演、上映时间、豆瓣评分)抓下来保存到本地的excle中本案例使用css方式提取页面数据,所以会用到以下库importtimeimportrequestsimportparsel#解析库,解析cssimportcsv#爬取的数据写入csv创建csv文件标头信息......
  • 前端开发-CSS
    三种CSS写法1.在标签内书写2.在head中书写3.在外部文件书写 各种选择器常用:类选择器,标签选择器,后代选择器少用:ID选择器,属性选择器    多个样式覆盖问题:1.样式不同时一起作用2.样式相同时,取style中排序后面的3.若要强制使用,则添加important,如color:red!imp......
  • js 修改当前的css
    CSSStyleSheet.insertRule()CSSStyleSheet.insertRule(".red::before{color:lightgray;content:"测试"}",0)CSSStyleSheet.addRule()已经移除废弃stylesheet.deleteRule(index)CSSStyleSheet.replace()详情见官网https://developer.mozilla.org/......
  • 怎么利用CSS实现HTML5响应式导航栏
    在html5中实现响应式导航栏的方法有很多种,如何利用纯CSS来现实这一功能,在这里小编就通过实例来和大家讲解,纯CSS实现的HTML5响应式导航栏的方法和技巧。目前响应试web页面已经逐渐开始盛行,除了将页面的内容以及布局结构实现响应试以外,剩下的重点就是实现导航栏的响应试,当然方法有很......