<!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>

      .price {

        width: 180px;

        height: 30px;

        border: 1px solid pink;

        border-radius: 5px;

        line-height: 30px;

        text-align: center;

        font-size: 14px;

      }

      .discount {

        position: relative;

        float: left;

        width: 100px;

        height: 100%;

        background: pink;

      }

      em {

        position: absolute;

        top: 0;

        right: 0;

        border-color: transparent white transparent transparent;

        border-style: solid;

        border-width: 30px 15px 0 0;

      }

      del {

        font-size: 12px;

        color: gray;

      }

    </style>

  </head>

  <body>

    <div class="price">

      <span class="discount">

        ￥1499

        <em></em>

      </span>

      <del>￥2532</del>

    </div>

  </body>

</html>

案例- CSS 三角加强的更多相关文章

  1. 【27前端】在线css三角

    我们都知道利用css边框的属性可以画出三角形,这里为了方便,我做了一个简单的demo页面供大家使用. 在线css三角

  2. CSS三角的写法（兼容IE6）

    目录 简介 优点 原理 1. 先创建一个div 2. 然后给div设定边框. 3. 给div的四个边框都设置不同的颜色 4. 把宽度和高度都变成0 5. 其余角为透明 6. 兼容IE6浏览器 造成这样 ...

  3. CSS3基础——笔记+实战案例(CSS基本用法、CSS层叠性、CSS继承性)

    CSS3基础——笔记 CSS是Cascading Style Sheet的缩写,翻译为"层叠样式表" 或 "级联样式表".CSS定义如何显示HTML的标签央视, ...

  4. css三角块

    html: <div class="angle"></div> css: .angle{ width: 0px; height: 0px; border-b ...

  5. 5.css三角的做法

    如上图所示,类似这样的小三角都可以通过以下代码写出: .box1 { width: ; height: ; /* border: 10px solid pink; */ border-top: 10p ...

  6. 不用图片做的三角语言框效果，纯样式编写，css三角样式写法

      2010-07-05 19:57:28 博主 回复 用户昵称 在秋日真的有轻柔吧. 上边效果与理想的有误差,代码布不上去,下边是源代码,另行保存后查看真正效果,下图是真正效果,区别在三角处,里面颜 ...

  7. css 三角实例

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  8. css 三角

    http://peunzhang.github.io/demo/css_angle/index.html

  9. css 三角图标

    .triangle-right{ display: inline-block; width: 0; height: 0; border-top: 6px solid transparent; bord ...

随机推荐

  1. js非布尔值的与(&&)与或(||)运算

    /** * 非布尔值的与(&&)与或(||)运算 * 1.先将其转换成布尔值再做运算,并且返回原值 * 2.与(&&)运算: * a.如果第一个值为true,则返回第二 ...

  2. mqtt haproxy 代理及负载搭建

    目录 mqtt 分布集群搭建 haproxy 安装配置 解压 安装 配置haproxy.cfg 启动haproxy 配置mqtt 测试 负载配置说明 负载均衡算法 ACL规则定义 全局配置 默认配置 ...

  3. 转载：tomcat过程原理

    基于Java的Web 应用程序是 servlet.JSP 页面.静态页面.类和其他资源的集合,它们可以用标准方式打包,并运行在来自多个供应商的多个容器.Web 应用程序存在于结构化层次结构的目录中,该 ...

  4. QProcess

    QT应用在windows系统下调用bat脚本,居然报错了.该BAT脚本,是用来检查svn.exe这个命令行工具,是否在当前系统里存在.在cmd终端里,一直是可正常执行的.但是在windows7家庭中文 ...

  5. 深度探索C++对象模型第四章：函数语义学

    C++有三种类型的成员函数:static/nonstatic/virtual 一.成员的各种调用方式 C with class 只支持非静态成员函数(Nonstatic member function ...

  6. BZOJ5205 [CodePlus 2018 3 月赛]白金元首与莫斯科

    传送门 emm在雅礼集训的时候听到的一道题 上来就觉得是插头dp 最后果然是轮廓线状压233 我们简化一下题意. 有一个n*m的网格,每个格子是空地或障碍物,询问把每一个空地看成障碍物的情况下,用1* ...

  7. 记录 SpringBoot 踩坑经历

    1.spring-boot-starter-web 作用 <dependency> <groupId>org.springframework.boot</groupId& ...

  8. 【Bootstrapt】offset、push、pull

    实现方式的区别: col-md-offset-*,是利用margin-left实现的,col-md-push-*/col-md-pull-*是利用相对定位实现的. 效果的区别: col-md-offs ...

  9. MTD系统架构和yaffs2使用、Nandflash驱动设计

    一.MTD系统架构 1.MTD设备体验 FLASH在嵌入式系统中是必不可少的,它是bootloader.linux内核和文件系统的最佳载体. 在Linux内核中引入了MTD子系统为NORFLASH和N ...

  10. Jetson Nano系列教程1：烧写系统镜像

    下载镜像 NVIDIA官方为Jetson Nano Developer Kit (后面统称为Jetson Nano了)提供了SD卡版本的系统镜像,并且根据JetPack版本不断得在更新.所以你可以直接 ...