<!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. unique（去重函数）

    去重排序(unique函数的使用) 2013年05月30日 11:05:45 阅读数:9689更多 个人分类: 字符串处理  出处:http://www.cnblogs.com/QQbai/archi ...

  2. canvas---从基础到实战

    canvas是H5新增的一个元素,可以用来描绘各种你想描绘的东西. canvas本身没有绘制能力,你可以把它当做一个容器,需要我们用脚本,也就是js来给他灌满水. 兼容性 1. IE9版本以上.Fir ...

  3. java 高性能Server —— Reactor模型单线程版

    NIO模型 NIO模型示例如下: Acceptor注册Selector,监听accept事件 当客户端连接后,触发accept事件 服务器构建对应的Channel,并在其上注册Selector,监听读 ...

  4. while循环与getopts处理

  5. TextView点击后背景颜色、文字颜色改变（转）

    转自:http://blog.csdn.net/u013278940/article/details/51152655 TextView本没有点击效果,故为实现点击后文字颜色改变和背景改变,需要写se ...

  6. vue.js axios使用

    1. 自定义配置 /** * Created by superman on 17/2/16. * http配置 */ import axios from 'axios' import utils fr ...

  7. 【JS】js引擎执行过程

    概述 js引擎执行过程主要分为三个阶段,分别是语法分析,预编译和执行阶段,上篇文章我们介绍了语法分析和预编译阶段,那么我们先做个简单概括,如下: 语法分析: 分别对加载完成的代码块进行语法检验,语法正 ...

  8. java html生成PDF，并打印

    import java.io.File; import java.io.FileOutputStream; import org.zefer.pd4ml.PD4Constants; import or ...

  9. 初学Linux基本的命令操作应当记牢

    Linux管理文件和目录的命令 命令 功能 命令 功能 pwd 显示当前目录 ls 查看目录下的内容 cd 改变所在目录 cat 显示文件的内容 grep 在文件中查找某字符 cp 复制文件 touc ...

  10. python 的按位与、或、异或 运算

    符号 描述 运算规则                        by MoreWindows & 与 两个位都为1时,结果才为1     (统计奇数) | 或 两个位都为0时,结果才为0  ...