<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

    * {

        margin: 0;

        padding: 0;

    }

    .box {

        width: 500px;

        height: 500px;

        background: #ddd;

        margin: 20px auto;

        position: relative;

    }

    .box .icon {

        display: block;

        height: 30px;

        line-height: 30px;

        color: #fff;

        position: absolute;

        right: -35px;

        top: 35px;

        transform: rotate(45deg);

        -ms-transform: rotate(45deg);

        -moz-transform: rotate(45deg);

        -webkit-transform: rotate(45deg);

        -o-transform: rotate(45deg);

    }

    .box .icon span {

        display: inline-block;

        float: left;

    }

    .box .icon span.left {

        width: 0;

        height: 0;

        border-top: 30px solid transparent;

        border-right: 30px solid #db0202;

    }

    .box .icon span.right {

        width: 0;

        height: 0;

        border-top: 30px solid transparent;

        border-left: 30px solid #db0202;

    }

    .box .icon span.center {

        height: 30px;

        line-height: 30px;

        color: #fff;

        background-color: #db0202;

    }

    </style>

</head>

<body>

    <div class="box">

        <div class="icon"><span class="left"></span><span class="center">专营高品质茶器</span><span class="right"></span></div>

    </div>

</body>

</html>

效果图：

css3边角旋转的更多相关文章

  1. css3制作旋转动画

    现在的css3真是强大,之前很多动画都是用jq来实现,但是css3制作的动画要比jq实现起来简单很多,今天呢,我自己也写了一个css旋转动画和大家分享.效果如下面的图片 思路:1.制作之前呢,我们先来 ...

  2. 纯css3实现旋转的太极图

    效果图: 代码如下: <!DOCTYPE html> <html> <head lang="zh"> <meta charset=&quo ...

  3. CSS3实现旋转的太极图（二）：只用1个DIV

    效果预览:   PS: 1.昨天用3个DIV实现了太极图(点击查看),,今天试着用1个Div来做. 2.公司刚忙过双10周年庆,最近空闲下来,闲着也是闲着,总得写点东西吧. 3.高手莫喷,小弟仅仅是没 ...

  4. CSS3绘制旋转的太极图案（一）

        实现步骤: 基础HTML: <div class="box-taiji"> <div class="circle-01">< ...

  5. 用css3制作旋转加载动画的几种方法

    以WebKit为核心的浏览器,例如Safari和Chrome,对html5有着很好的支持,在移动平台中这两个浏览器对应的就是IOS和Android.最近在开发一个移动平台的web app,那么就有机会 ...

  6. 【Demo】CSS3元素旋转、缩放、移动或倾斜

    CSS3元素旋转.缩放.移动或倾斜 代码: <!DOCTYPE html> <html lang="en"> <head> <meta c ...

  7. CSS3制作旋转导航

    慕课网学习CSS3时,遇到个习题,觉得有必要总结学习下:CSS3制作旋转导航 慕课网习题地址:http://www.imooc.com/code/1883 示例及源码地址:http://codepen ...

  8. css3立体旋转菜单

    css3立体旋转菜单,css3,3D,立体旋转,立体菜单,菜单导航,css3立体旋转菜单是一款纯css3实现的三维立体旋转导航菜单. 源码下载页:http://www.huiyi8.com/sc/71 ...

  9. 【微信支付】分享一个失败的案例 跨域405(Method Not Allowed)问题 关于IM的一些思考与实践 基于WebSocketSharp 的IM 简单实现 【css3】旋转倒计时 【Html5】-- 塔台管制 H5情景意识 --飞机 谈谈转行

    [微信支付]分享一个失败的案例 2018-06-04 08:24 by stoneniqiu, 2744 阅读, 29 评论, 收藏, 编辑 这个项目是去年做的,开始客户还在推广,几个月后发现服务器已 ...

随机推荐

  1. Superset安装

    Superset version 1.8.5     # Install superset   pip install cairocffi   pip install superset     yum ...

  2. Lambert模型

    [Lambert模型] 漫反射光的强度近似地服从于Lambert定律,即漫反射光的光强仅与入射光的方向和反射点处表面法向夹角的余弦成正比. 由此可以构造出Lambert漫反射模型:Idiffuse = ...

  3. java求最长公共子串的长度

    1这道题目就是给定两个字符串,然后求这两个字符串的最长公共子串的最大长度,假设我的f()方法是来求两个字符串的最大公共子串,从头开始逐一比较,如果相等,则 继续调用这个方法,使得递归的长度+1,如果不 ...

  4. 高性能Web服务器Nginx的配置与部署研究（13）应用模块之Memcached模块+Proxy_Cache双层缓存模式

    通过<高性能Web服务器Nginx的配置与部署研究——(11)应用模块之Memcached模块的两大应用场景>一文,我们知道Nginx从Memcached读取数据的方式,如果命中,那么效率 ...

  5. 108.Convert Sorted Array to Binary Search Tree(Array; Divide-and-Conquer, dfs)

    Given an array where elements are sorted in ascending order, convert it to a height balanced BST. 思路 ...

  6. Io 异常: The Network Adapter could not establish the connection解决方案

    Io 异常: The Network Adapter could not establish the connection解决方案 2016年06月04日 13:30:21 阅读数:46589 Io ...

  7. 基于Mybatis分页插件PageHelper

    基于Mybatis分页插件PageHelper 1.分页插件使用 1.POM依赖 PageHelper的依赖如下.需要新的版本可以去maven上自行选择 <!-- PageHelper 插件分页 ...

  8. 万能头文件#include<bits/stdc++.h>

    最近在打cf时赛后翻阅别人的代码总是会发现一个陌生而奇怪的头文件#include<bits/stdc++.h> 奇怪之处就在于基本上所有的代码只要用了这个头文件就不再写其他头文件了. 百度 ...

  9. shiro 集成spring 使用 redis作为缓存 学习记录（六）

    1.在applicationContext-redis.xml配置文件中增加如下: 申明一个cacheManager对象 用来注入到  shiro的   securityManager 属性  cac ...

  10. SqlServer 分区视图实现水平分表

    我们都知道在数据库数据量较多的时候,可数据进行水平扩展,如分库,分区,分表(也叫分区)等.对于分表的一个方案,就是使用分区视图实现. 分区视图允许将大型表中的数据拆分成较小的成员表.根据其中一列中的数 ...