代码：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>折角效果</title>

<style type="text/css">

    div {

        width: 300px;

        height: 200px;

        background: #333;

        position: relative;

    }

    div:before {

        content: '';

        width: 0px;

        height: 0px;

        position: absolute;

        top: 0px;

        right: 0px;

        border-right: 0px solid #333;

        border-bottom: 0px solid #768;

        border-bottom-width: 30px;

        border-right-width: 30px;

    }

</style>

</head>

<body>

<div></div>

</body>

</html>

div折角~~~的更多相关文章

  1. CSS3实战开发: 折角效果实战开发

    <!DOCTYPE html> <html> <head> <meta charset="utf-9"> <meta name ...

  2. CSS 折角效果

    1 <style type="text/css"> .div1 { width: 200px; height: 200px; background-color: #ff ...

  3. CSS3知识之折角效果

    CSS3折角效果:可兼容不同背景

  4. CSS3图片折角效果

    本篇文章由:http://xinpure.com/css3-picture-angle-effect/ 图片折角效果主要是通过设置 border 属性实现的效果 效果预览 效果解析 假设我们将一个元素 ...

  5. css 折角效果/切角效果

    首先我们先创建一个图案为100像素的斜面切角的图案 html <div class="one">12345</div> css .one{ width: 1 ...

  6. Css--深入学习之折角效果

    本文是作者从别的网站和文章学习了解的知识,简单做了个笔记,想要学习更多的可以参考这里:[css进阶]伪元素的妙用--单标签之美,奇思妙想 代码: /*建立一个带圆角的矩形,并使用线性渐变将其从左到底透 ...

  7. css切角效果，折角效果

    html <div class="one">12345</div> <div class="two">abcde</d ...

  8. 《css3揭秘》的效果code

    1.在阅读css3揭秘的基础上,跟着书中的效果组合起来的这组代码. 2.代码中有四张图片分别是 1.jpg 2.jpg  3.jpg 4.jpg; 作为demo,图片名称没有语义. 3.兼容性:  I ...

  9. CSS奇思妙想图形（心形、气泡三角形、切角、梯形、饼图等）

    今天看到一篇不错文章,在原来CSS3图形创建基础上扩展了很多. 这里记录总结下 心形 原理:利用 圆形 和 正方形实现 HTML: <div class="heartShaped&qu ...

随机推荐

  1. 缓解DDoS && cc 的最佳Linux内核设置 (转)

    https://javapipe.com/blog/iptables-ddos-protection/ kernel.printk = 4 4 1 7 kernel.panic = 10 kernel ...

  2. bridge和原生交互的简单用法

    首先获取当前环境是ios还是Android var u = navigator.userAgent; var isAndroid = u.indexOf('Android') > -1 || u ...

  3. 三层交换，单臂路由，vtp

  4. 超详尽-QThread的正确使用姿势-以及信号槽的跨线程使用

    贴上两篇博文 一.http://www.cnblogs.com/findumars/p/5031239.html 循序渐进介绍了,怎样正确的让槽函数工作在子线程中. 同时介绍了信号槽的绑定与线程的关系 ...

  5. Java生成艺术二维码也可以很简单

    原文点击: Quick-Media Java生成艺术二维码也可以很简单 现在二维码可以说非常常见了,当然我们见得多的一般是白底黑块,有的再中间加一个 logo,或者将二维码嵌在一张特定的背景中(比如微 ...

  6. Hadoop 3.1.2 + Hive 3.1.1

    一.安装Hadoop 1.1 版本说明 hadoop:3.1.2hive:3.1.1mysql:5.6.40 1.2 主机映射 添加IP与主机名的映射关系,在/etc/hosts文件里添加如下内容(所 ...

  7. Openresty 健康检查

    ## 指定共享内存 lua_shared_dict healthcheck 1m; ## 在worker初始化过程中,启动定时器,进行后端结点的检查 init_worker_by_lua_block ...

  8. 【Spring-AOP-学习笔记】

    http://outofmemory.cn/java/spring/spring-DI-with-annotation-context-component-scan https://www.cnblo ...

  9. (转).Net Core控制台生成exe能独立运行

    原文介绍了两种方式,方式一经测试可用(生成exe在开发机器上可运行),但是因为服务器是windows server2012 r2,没有安装补丁,造成了困难,尚未在服务器上运行成功. (提示 api-m ...

  10. MVC通过ViewBag动态生成Html输出到View

    今天再给自己总结一下,关于ViewBag赋值Html格式值,但是在web页显示不正常; 例如,ViewBag.Content = "<p>你好,我现在测试一个东西.</p& ...