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中文字镂空、透明值、阴影效果设置示例小结
Mar 07 HTML / CSS
CSS3用@font-face实现自定义英文字体
Sep 23 HTML / CSS
CSS3+Sprite实现僵尸行走动画特效源码
Jan 27 HTML / CSS
CSS3 实现童年的纸飞机
May 05 HTML / CSS
css3 transform过渡抖动问题解决
Oct 23 HTML / CSS
10种CSS3实现的loading动画,挑一个走吧?
Nov 16 HTML / CSS
HTML5 Web Workers之网站也能多线程的实现
Apr 24 HTML / CSS
Html5 语法与规则简要概述
Jul 29 HTML / CSS
HTML最新标准HTML5总结(必看)
Jun 13 HTML / CSS
HTML5地理定位_动力节点Java学院整理
Jul 12 HTML / CSS
canvas 基础之图像处理的使用
Apr 10 HTML / CSS
CSS3 菱形拼图实现只旋转div 背景图片不旋转功能
Mar 30 HTML / CSS
css3新特性的应用示例分析
Mar 16 #HTML / CSS
CSS font-variation 可变字体的魅力(实例详解)
HTML中的表单元素介绍
HTML中的表格元素介绍
HTML基本元素标签介绍
使用CSS连接数据库的方式
css常用字体属性与背景属性介绍
You might like
一些关于PHP的知识
2006/11/17 PHP
通过php快速统计某个数据库中每张表的数据量
2012/09/04 PHP
php switch语句多个值匹配同一代码块的实现
2014/03/03 PHP
jquery+php实现导出datatables插件数据到excel的方法
2015/07/06 PHP
javascript 内存回收机制理解
2011/01/17 Javascript
setTimeout自动触发一个js的方法
2014/01/15 Javascript
解决自定义$(id)的方法与jquery选择器$冲突的问题
2014/06/14 Javascript
基于Jquery实现仿百度百科右侧导航代码附源码下载
2015/11/27 Javascript
理解js回收机制通俗易懂版
2016/02/29 Javascript
深入nodejs中流(stream)的理解
2017/03/27 NodeJs
详解Vue 中 extend 、component 、mixins 、extends 的区别
2017/12/20 Javascript
webpack3升级到webpack4遇到问题总结
2019/09/30 Javascript
新手入门js闭包学习过程解析
2019/10/08 Javascript
webpack+express实现文件精确缓存的示例代码
2020/06/11 Javascript
在vue中使用console.log无效的解决
2020/08/09 Javascript
[02:57]DOTA2亚洲邀请赛小组赛第四日 赛事回顾
2015/02/02 DOTA
python 判断自定义对象类型
2009/03/21 Python
python执行shell获取硬件参数写入mysql的方法
2014/12/29 Python
详解在Python程序中解析并修改XML内容的方法
2015/11/16 Python
简单解决Python文件中文编码问题
2015/11/22 Python
Django原生sql也能使用Paginator分页的示例代码
2017/11/15 Python
Win8.1下安装Python3.6提示0x80240017错误的解决方法
2018/07/31 Python
浅析Python3中的对象垃圾收集机制
2019/06/06 Python
PyQt5 窗口切换与自定义对话框的实例
2019/06/20 Python
利用pytorch实现对CIFAR-10数据集的分类
2020/01/14 Python
Jimmy Choo美国官网:周仰杰鞋子品牌
2018/06/08 全球购物
For Art’s Sake官网:手工制作的奢华眼镜
2018/12/15 全球购物
港湾网络笔试题
2014/04/19 面试题
教育学专业毕业生的自我评价
2013/11/21 职场文书
关于运动会的口号
2014/06/07 职场文书
学校师德师风整改措施
2014/10/27 职场文书
寒假社会实践个人总结
2015/03/06 职场文书
通知范文怎么写
2015/04/16 职场文书
幼儿园保教工作总结2015
2015/10/15 职场文书
党员反四风学习心得体会
2016/01/22 职场文书
Vue ECharts实现机舱座位选择展示功能
2022/05/15 Vue.js