代码：

<!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. RabbitMQ安装后无法访问15672端口

    切换到RabbitMQ的安装目录 sbin 目录下执行: rabbitmq-plugins enable rabbitmq_management 即可打开管理界面. rabbitmq的web管理界面无 ...

  2. 【SpringBoot】SpringBoot配置与单元测试（二）

    SpringBoot项目创建参考[SpringBoot]SpringBoot快速入门(一) 本文介绍SpringBoot项目的POM文件.配置与单元测试 POM文件 1.SpringBoot的pom文 ...

  3. linux编译Qt+mysql驱动+可执行文件移植目标机

    前言: 如果希望自己的Qt/C++程序在目标机上运行,最简单的方法就是在目标机上安装一个Qtcreater[Qtxxx.run],然后编译release的可执行文件,直接拉起即可. 但是有些环境情况比 ...

  4. delimiter关键字

    默认的sql语句以分号";"表示结束.mysql解释器每遇到一个分号,执行一段语句.可以通过delimiter更改语句结束符 mysql>delimiter &&am ...

  5. Javascript判斷function是否定義

    jQuery可以用 isFunction() 來進行判斷 如果僅使用Javascript可以使用以下的方法 function isFunction(fn){ return typeof fn === ...

  6. Vmware解决虚拟机不能联网的问题

    1. 设置为NAT模式 2. 启动win7的服务,命令窗口输入services.msc 回车 3. 修改Vmware的设置

  7. 【SSH进阶之路】Hibernate系列——总结篇(九)

    这篇博文是Hibernate系列的最后一篇,既然是最后一篇,我们就应该进行一下从头到尾,整体上的总结,将这个系列的内容融会贯通. 概念 Hibernate是一个对象关系映射框架,当然从分层的角度看,我 ...

  8. javascript 从对象数组中 按字段/属性取最大值或最小值

    var array=[ { "index_id": 119, "area_id": "18335623", "name" ...

  9. 湖南省第十三届大学生计算机程序设计竞赛 Football Training Camp 贪心

    2007: Football Training Camp[原创-转载请说明] Submit Page   Summary   Time Limit: 1 Sec     Memory Limit: 1 ...

  10. IntelliJ IDEA重新打开后把字母隐藏怎么办

    默认Font的字体melno不行,r会隐形 解决方案:更换idea字体,点击apply按钮即可正常显示 修改Font为的consoleas  Size:16   line spacing:1.25