<!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. 看FPGA面试题时见到被考到的几个逻辑电路

    8位 D触发器: module dff8(clk , reset, d, q); input clk; input reset; :] d; :] q; :] q; always @ (posedge ...

  2. 51.Lowest Common Ancestor of a Binary Tree（二叉树的最小公共祖先）

    Level:   Medium 题目描述: Given a binary tree, find the lowest common ancestor (LCA) of two given nodes ...

  3. 将一个对象赋值给另一个对象(使用element CheckBox中length报错)

    注意两个对象相似(比如form表单),千万不要直接赋值(会把对象的属性也变化),很容易漏掉一些属性.比如此次CheckBox报length的错误,就是因为用于存放checkbox复选框选项的数组进过赋 ...

  4. elasticsearch 嵌套对象之嵌套类型

    nested类型是一种特殊的对象object数据类型(specialised version of the object datatype ),允许对象数组彼此独立地进行索引和查询. 1. 对象数组如 ...

  5. Centos 7 安装openjdk8

    一.使用yum命令搜索支持jdk版本 yum search java|grep jdk 二.使用yum安装jdk8 yum install -y java--openjdk 三.检查是否成功 java ...

  6. Codeforces 1197E Culture Code DP

    题意:你有n个俄罗斯套娃,已知每个套娃的容积和体积,问有多少个子集满足以下条件: 1:这个子集是一个极大子集,即不能再添加其它的套娃到这个子集里. 2:子集的套娃之间的间隙和最小. 思路1:线段树优化 ...

  7. RabbitMQ学习第三记：发布/订阅模式（Publish/Subscribe）

    工作队列模式是直接在生产者与消费者里声明好一个队列,这种情况下消息只会对应同类型的消费者. 举个用户注册的列子:用户在注册完后一般都会发送消息通知用户注册成功(失败).如果在一个系统中,用户注册信息有 ...

  8. JDBC、ibatis(mybatis)、Hibernate有什么不同？

    ①JDBC编程流程固定,同时将sql语句和java代码混在了一起,经常需要拼凑sql语句,细节很繁琐: ②ibatis(mybatis)它不完全是一个ORM框架,因为MyBatis需要程序员自己编写S ...

  9. Tornado中异步框架的使用

    tornado的同步框架与其他web框架相同都是处理先来的请求,如果先来的请求阻塞,那么后面的请求也会处理不了.一直处于等待过程中.但是请求一旦得到响应,那么: 请求发送过来后,将需要的本站资源直接返 ...

  10. zoj 2112 单点修改的主席树（树状数组套主席树）

    题目大意: 区间第k大问题+单点修改 基本思路: 这个题有用整体二分,cdq分治,还有主席树+平衡树的,还有就是主席树+树状数组. 我采用的是b站电子科大大佬的主席树写法,尤其喜欢他的离散化方法,所以 ...