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制作翻转效果_动力节点Java学院整理
Jul 11 HTML / CSS
CSS3动画animation实现云彩向左滚动
May 09 HTML / CSS
一款利用纯css3实现的win8加载动画的实例分析
Dec 11 HTML / CSS
浅析与CSS3的loading动画加载相关的transition优化
May 18 HTML / CSS
使用CSS3和Checkbox实现JQuery的一些效果
Aug 03 HTML / CSS
html5适合移动应用开发的12大特性
Mar 19 HTML / CSS
深入解析HTML5 Canvas控制图形矩阵变换的方法
Mar 24 HTML / CSS
深入理解HTML的FormData对象
May 17 HTML / CSS
HTML5 canvas基本绘图之图形组合
Jun 27 HTML / CSS
Web前端:CSS最强总结 附详细代码
Mar 31 HTML / CSS
html+css实现赛博朋克风格按钮
May 26 HTML / CSS
CSS font-variation 可变字体的魅力(实例详解)
Mar 03 HTML / CSS
css3新特性的应用示例分析
Mar 16 #HTML / CSS
CSS font-variation 可变字体的魅力(实例详解)
HTML中的表单元素介绍
HTML中的表格元素介绍
HTML基本元素标签介绍
使用CSS连接数据库的方式
css常用字体属性与背景属性介绍
You might like
php读取mysql乱码,用set names XXX解决的原理分享
2011/12/29 PHP
PHP 读取和编写 XML
2014/11/19 PHP
php实现批量修改文件名称的方法
2016/07/23 PHP
实现PHP搜索加分页
2016/10/12 PHP
浅谈PHP SHA1withRSA加密生成签名及验签
2019/03/18 PHP
thinkPHP+LayUI 流加载实现功能
2019/09/27 PHP
极酷的javascirpt,让你随意编辑任何网页
2007/02/25 Javascript
Javascript 类与静态类的实现
2010/04/01 Javascript
Jquery实现弹出层分享微博插件具备动画效果
2013/04/03 Javascript
简易js代码实现计算器操作
2013/04/15 Javascript
jQuery操作表格(table)的常用方法、技巧汇总
2014/04/12 Javascript
jQuery操作元素css样式的三种方法
2014/06/04 Javascript
原生JS和JQuery动态添加、删除表格行的方法
2015/05/28 Javascript
JavaScript实现时间倒计时跳转(推荐)
2016/06/28 Javascript
Boostrap实现的登录界面实例代码
2016/10/09 Javascript
js导出excel文件的简洁方法(推荐)
2016/11/02 Javascript
jQuery的ajax中使用FormData实现页面无刷新上传功能
2017/01/16 Javascript
JavaScript观察者模式(publish/subscribe)原理与实现方法
2017/03/30 Javascript
js实现一个猜数字游戏
2017/03/31 Javascript
javascript连接mysql与php通过odbc连接任意数据库的实例
2017/12/27 Javascript
vue中promise的使用及异步请求数据的方法
2018/11/08 Javascript
解决layui checkbox 提交多个值的问题
2019/09/02 Javascript
element-ui点击查看大图的方法示例
2020/12/14 Javascript
python调用cmd复制文件代码分享
2013/12/27 Python
Python使用Flask框架获取当前查询参数的方法
2015/03/21 Python
Python中字典创建、遍历、添加等实用操作技巧合集
2015/06/02 Python
Python实现返回数组中第i小元素的方法示例
2017/12/04 Python
Django 简单实现分页与搜索功能的示例代码
2019/11/07 Python
使用 PyTorch 实现 MLP 并在 MNIST 数据集上验证方式
2020/01/08 Python
python中使用you-get库批量在线下载bilibili视频的教程
2020/03/10 Python
群众路线调研报告范文
2014/11/03 职场文书
海上钢琴师观后感
2015/06/03 职场文书
学生会工作感言
2015/08/07 职场文书
检讨书怎么写?
2019/06/21 职场文书
react国际化react-intl的使用
2021/05/06 Javascript
《巫师》是美食游戏?CDPR10月将推出《巫师》官方食谱
2022/04/03 其他游戏