<!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. docker--container之间的link,bridge create

    container的name和ID一样,也是唯一的,当不知道container的IP时,可以用name替代,但需要先配置link 下面创建两个container 时,未配置link所以ping nam ...

  2. Java中的动态代理（jdk和cglib）

    JAVA的动态代理 代理模式 代理模式是常用的java设计模式,他的特征是代理类与委托类有同样的接口,代理类主要负责为委托类预处理消息.过滤消息.把消息转发给委托类,以及事后处理消息等.代理类与委托类 ...

  3. 使用 lombok 简化代码

    使用前的准备 1.Lombok 是一种 Java™ 实用工具,可用来帮助开发人员消除 Java 的冗长,尤其是对于简单的 Java 对象(POJO).它通过注解实现这一目的.  <1>添加 ...

  4. Ansible--06 ansible roles

    Ansible roles roles不管是Ansible还是saltstack,我在写一键部署的时候,都不可能把所有的步骤全部写入到一个'剧本'文件当中,我们肯定需要把不同的工作模块,拆分开来,解耦 ...

  5. 力扣 — Rotate List（）

    题目描述: 中文: 给定一个链表,旋转链表,将链表每个节点向右移动 k 个位置,其中 k 是非负数. 示例 1: 输入: 1->2->3->4->5->NULL, k = ...

  6. tarjan强连通缩点

    int dfn[maxn],low[maxn],belong[maxn]; bool instk[maxn]; stack<int>stk; void tarjan(int u){ dfn ...

  7. 21.与重入锁相关联的Condition

    import java.util.concurrent.locks.Condition; import java.util.concurrent.locks.ReentrantLock; /** * ...

  8. Qt QSS图片样式切割，三种状态normal,hover,pressed

    要切割的样式图片如下: pix_Button->setStyleSheet("QPushButton{ border-image:url(:/image/MyButtonimage/m ...

  9. 在windows下使用secure crt传文件到linux的主目录下

    SECURT CRT上传文件 使用secure crt连接到Linux上 通过alt+p打开sftp服务 使用put D:\视觉\代码\ch.10.zip 即可传输完成 进入linux直接在主目录下可 ...

  10. Windows10 通用快捷键命令

    总想着甩掉鼠标,来一种只用键盘的各种行云流水般的快捷操作,在网上各个论坛,博客,搜索引擎,最后终于记录整理了出来! 为了尝试新的命令提示符下,只需     打开开始菜单,然后键入cmd并回车. 按Ct ...