<!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. SQL数据库—<7>事务、异常和游标

    事务 一.什么是事务能够保证数据的一致性的代码控制,要么执行提交,要么滚回事务的初始状态 二.事务的四大特性:ACIDA:原子性-------事务不可拆开,要么执行要么回滚无中间状态C:一致性---- ...

  2. APScheduler的简单记录

    此工具作为 定时任务调度 系统,在日常业务中经常使用,如定时获取第三方数据,定时清理数据 等等: 定时任务 和 业务逻辑 编写方式 一般有2种: 以 定时 清理db数据为例,在flask中,如下: 1 ...

  3. githup上传项目到仓库

    1.有了自己的账号 2.创建一个新的项目,填写项目名称,描述 填写完成点击create repository 3.复制生成的https链接接下来用到 4.进入到你的项目所在目录右键git bash打开 ...

  4. 05.线程在睡眠时拥有的监视器资源不会被释放(这里使用重入锁ReentrantLock)

    import java.util.concurrent.locks.Lock; import java.util.concurrent.locks.ReentrantLock; public clas ...

  5. springboot不能用 @SpringApplicationConfiguraction 解决方案

    @SpringApplicationConfiguraction  是在springboot 1.4之前,之后改用 @RunWith(SpringJUnit4ClassRunner.class) @S ...

  6. PHP发送公众号模板消息

    <?php /* * 模板消息发送,电脑端测试时需要手动填写openid * 微信端会自动获取当前openid发送无需填写 */ header("Content-type: text/ ...

  7. hibernate 双向1对多

    1: 还是用客户Customer和订单Order来解释: “一对多”的物理意义:一个客户可以有多个订单,某个订单只能归宿于一个客户. “双向”的物理意义:客户知道自己有哪些订单,订单也知道自己归宿于哪 ...

  8. paper 133：结构张量Structure Tensor（一）

    1.结构张量的作用:       能够区分图像中的平坦区域,边缘,角点: 2.图像中的结构张量的定义    1)是一个矩阵:    2)与图像的水平,垂直梯度有关,定义如下: 在MATLAB中,可以用 ...

  9. CDN技术之--内容缓存工作原理

    有CDN前的网站服务技术–硬件扩展:高成本,灵活性和可扩展性比较差–镜像技术(mirroring):镜像服务器安装有一个可以进行自动远程备份的软件,每隔一定时间,各个镜像服务器就会到网站的源服务器上去 ...

  10. uploadify的使用错误

    在看singwa的视频教程中,学习使用hui-admin模版,在使用uploadify插件上传图片中出现错误. ReferenceError: Can't find variable: $因为使用JQ ...