CSS 折角效果

1

<style type="text/css">
        .div1 {
            width: 200px;
            height: 200px;
            background-color: #ff6a00;
            border-width: 6px;
            margin: 0 auto;
        }

        .div2 {
            position: relative;
            width: 0;
            height: 0;
            border: 20px solid black;
            border-color:transparent  #ffd800 #ffd800 transparent ;
            background-color:#fff;
            font-size:xx-small;
            text-align:left;
        }
    </style>

  2:HTML

  <div class="div1">
        <div class="div2">
            折角
        </div>
    </div>

  

时间: 2024-12-25 01:42:35

CSS 折角效果的相关文章

CSS打造的边框折角效果

<html> <head> <title>CSS打造的边框折角效果</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <style type="text/css"> <!-- .curlycontainer{ border: 1px solid #b8b8b8;

css3 折角效果

<!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:

CSS3图片折角效果

本篇文章由:http://xinpure.com/css3-picture-angle-effect/ 图片折角效果主要是通过设置 border 属性实现的效果 效果预览 效果解析 假设我们将一个元素的 width .height 都设置为0,然后再将 border 设置为 80px,上下和左右边框分别为两种不同的颜色 即: width: 0; height: 0; border: 80px solid; border-color: #00a67c #333; 这时我们可以看到,四条边框像四个三

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

<!DOCTYPE html> <html> <head> <meta charset="utf-9"> <meta name="keywords" content="css,css3,实战互联网,教程"> <meta name="description" content="css3实现折角效果,折角效果,css3实战尽在实战互联网" >

CSS3实战开发:手把手教大家折角效果实战开发

各位网友,大家好,我是陌上花会开,今天这篇文章,我将手把手教大家如何开发一套纯CSS的折角效果.一如往常,我不提供代码下载,但是我可以保证,只要将教程中的代码复制到本地,绝对百分百获得与我演示的效果一样,希望各位明白我的用意. 好了,直接开始今天的教程吧.首先,我先给大家演示一下今天实战案例的效果: 有人会说这是什么?这就是我们今天的实战开发,我将带领大家开发上图中的右上角折叠效果. 在我讲解完之前,有些人可能觉得很难,不可思议.我想跟你们说:真的so easy.下面就请跟着我的分解步骤一步步学

边框折角效果

1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 .image-layer { 8 width: 384px; 9 height: 240px; 10 margin: 40px auto 0; 11 position: relativ

div折角~~~

代码: <!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 { cont

[CSS揭秘]切角效果

将角切掉也是一种流行的设计风格 传统解决方案可能是使用三角形或者其他形状的图片来盖住边角从而模拟切角效果 有了CSS3,我们完全可以使用新技术来实现 第一种方案: CSS渐变 需求一: 一个矩形需要切掉一个45°角 使用线性渐变来实现 background: #58a linear-gradient(-45deg, transparent 15px, #58a 0); 在渐变中,如果指定stop距离为0则表示与前一个stop的距离一样,所以从15px开始往后都是#58a 效果如下 需求二: 一个

如何使用CSS3实现书页(书本)卷角效果

我们有时候想在页面显示一个公告或用户提示信息.一个常用设计是使用书签形状. 我们可以给书签添加卷角效果,以使其更为逼真.所谓的"卷角"实际上可以用小角度倾斜的阴影效果来模拟. 用CSS3的伪元素实现这个效果很容易. 先给出一个实例,我们在WOW站点页面左边栏实现了如下的效果(红框内): 我们再来看看具体实现. 首先创建一个div元素容纳文本信息(可以包含更多元素),class取名为"狗耳朵"也就是卷角的意思: <div class="dog-eare