css布局巧妙技巧之css三角示例的运用


Posted in HTML / CSS onMarch 16, 2022

css三角强化

上期的css三角是等腰的,有是我们需要像下面这中的直角,该怎么做呢?

css布局巧妙技巧之css三角示例的运用

接下来我一步步教你做:

在上期做法基础上做改动就行

css布局巧妙技巧之css三角示例的运用

只需要把上期这个盒子左边框和下边框宽度设为0,上边框加大宽度就行。

.demo1{
            width:0;
            height: 0;
            line-height: 0;
            font-size: 0;
            border-top:20px solid red ;
            border-right:10px solid green ;
            border-bottom:0px solid blue ;
            border-left:0px solid purple ;
        }

css布局巧妙技巧之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>Document</title>
    <style>
        .demo1{
            width:0;
            height: 0;
            line-height: 0;
            font-size: 0;
            border-top:20px solid transparent ;
            border-right:10px solid green ;
            border-bottom:0px solid blue ;
            border-left:0px solid purple ;
        }
    </style>
</head>
<body>
    <div class="demo1">

    </div>
</body>
</html>

css布局巧妙技巧之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>Document</title>
    <style>
        .demo{
            width: 160px;
            height: 24px;
            line-height: 24px;  /* 让文本垂直居中 */
            border: 1px solid red;
            margin: 50px  auto;
        }
        .demo1{
            position: relative;
            float: left;   /* span是行内元素,浮动之后可设置宽高*/
            width: 90px;
            height: 100%;
            background-color: red;
            text-align: center;
            color: #fff;
            font-weight: 700;
            margin-right: 8px;
        }
        .demo1 i{
            position: absolute;
            right: 0;
            top: 0;
            width: 0;
            height: 0;
            border-color: transparent #fff transparent transparent;
            border-style: solid;
            border-width: 24px 10px 0 0;
          }  
          .demo2{
              font-size: 12px;
              color: gray;
              text-decoration: line-through;
          }
    </style>
</head>
<body>
    <div class="demo">
        <span class="demo1"> 
            ¥1500
            <i></i>
        </span>
        <span class="demo2">¥1999</span>
    </div>
</body>
</html>

css布局巧妙技巧之css三角示例的运用

结语

以上就是css布局技巧css三角示例的巧妙运用的详细内容,更多关于css布局三角运用的资料请关注三水点靠木其它相关文章!

 
HTML / CSS 相关文章推荐
css3 线性渐变和径向渐变示例附图
Apr 08 HTML / CSS
深入浅析css3 中display box使用方法
Nov 25 HTML / CSS
什么是CSS3 HSLA色彩模式?HSLA模拟渐变色条
Apr 26 HTML / CSS
CSS3之2D与3D变换的实现方法
Jan 28 HTML / CSS
html5 input元素新特性_动力节点Java学院整理
Jul 06 HTML / CSS
HTML5文档结构标签
Apr 21 HTML / CSS
HTML5之SVG 2D入门6—视窗坐标系与用户坐标系及变换概述
Jan 30 HTML / CSS
html5使用canvas绘制一张图片
Dec 15 HTML / CSS
纯HTML5+CSS3制作生日蛋糕(代码易懂)
Nov 16 HTML / CSS
怎样实现H5+CSS3手指滑动切换图片的示例代码
May 05 HTML / CSS
web前端之css水平居中代码解析
May 20 HTML / CSS
HTML5页面打开微信小程序功能实现
Sep 23 HTML / CSS
css3新特性的应用示例分析
Mar 16 #HTML / CSS
CSS font-variation 可变字体的魅力(实例详解)
HTML中的表单元素介绍
HTML中的表格元素介绍
HTML基本元素标签介绍
使用CSS连接数据库的方式
css常用字体属性与背景属性介绍
You might like
php获取数组长度的方法(有实例)
2013/10/27 PHP
20个2014年最优秀的PHP框架回顾
2014/10/22 PHP
PHP rmdir()函数的用法总结
2019/07/02 PHP
[原创]IE view-source 无法查看看源码 JavaScript看网页源码
2009/07/19 Javascript
js解析与序列化json数据(二)序列化探讨
2013/02/01 Javascript
js 表单提交后按钮变灰的实例代码
2013/08/16 Javascript
node.js中的url.resolve方法使用说明
2014/12/10 Javascript
详解自动生成博客目录案例
2016/12/09 Javascript
详解JS对象封装的常用方式
2016/12/30 Javascript
js Canvas绘制圆形时钟教程
2017/02/06 Javascript
vue使用vue-cli快速创建工程
2017/07/28 Javascript
深入理解js A*寻路算法原理与具体实现过程
2018/12/13 Javascript
Vue.js中的组件系统
2019/05/30 Javascript
js里面的变量范围分享
2020/07/18 Javascript
JavaScript中的几种继承方法示例
2020/12/06 Javascript
一起深入理解js中的事件对象
2021/02/06 Javascript
python正则分组的应用
2013/11/10 Python
Python使用py2exe打包程序介绍
2014/11/20 Python
python动态参数用法实例分析
2015/05/25 Python
windows下python安装paramiko模块和pycrypto模块(简单三步)
2017/07/06 Python
在Python中使用AOP实现Redis缓存示例
2017/07/11 Python
python 获取当天凌晨零点的时间戳方法
2018/05/22 Python
selenium+python自动化测试之页面元素定位
2019/01/23 Python
Python实现图片转字符画的代码实例
2019/02/22 Python
Python文件操作中进行字符串替换的方法(保存到新文件/当前文件)
2019/06/28 Python
Django基础知识 URL路由系统详解
2019/07/18 Python
获取Pytorch中间某一层权重或者特征的例子
2019/08/17 Python
Python爬取知乎图片代码实现解析
2019/09/17 Python
Jupyter Notebook 实现正常显示中文和负号
2020/04/24 Python
详解Python中的编码问题(encoding与decode、str与bytes)
2020/09/30 Python
应届毕业生求职信范例分享
2013/12/17 职场文书
集团薪酬管理制度
2014/01/13 职场文书
单位承诺书格式
2014/05/21 职场文书
党员个人剖析材料(四风问题)
2014/10/07 职场文书
用Python创建简易网站图文教程
2021/06/11 Python
利用Python将list列表写入文件并读取的方法汇总
2022/03/25 Python