css揭秘|第三章：形状

最新推荐文章于 2024-10-10 17:20:19 发布
最新推荐文章于 2024-10-10 17:20:19 发布
阅读量93 收藏
点赞数
分类专栏： # css揭秘 笔记 css 文章标签： css css3 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47029896/article/details/115527799
版权
笔记 同时被 3 个专栏收录
9 篇文章 0 订阅
订阅专栏
css
9 篇文章 0 订阅
订阅专栏
css揭秘
4 篇文章 0 订阅
订阅专栏

自适应的椭圆

以下是个普通圆形

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    div {
        background: #fb3;
        width: 200px;
        height: 200px;
        border-radius: 100px;
        /*>=正方形边长的一半*/
    }
</style>

<body>
    <div><strong></strong></div>
</body>

</html>

这里尺寸是被固定好的，一旦内容发生变化，比如宽度突然增加了100px，会出现像以下情况在这里插入图片描述

但是我们需要的是，如果宽高不等，这个图像自己变幻成椭圆

border-radius可以单独指定水平和垂直半径，用一个/分隔

border-radius：150px / 100px/*分别为宽高长度的一半

元素尺寸随着他的内容变化而变化，就不能写死长度，因此border-radius可以接受百分比值

border-radius: 50% / 50%;

由于这俩是一样的，我们简化为以下。这一行代码可以得到一个自适应的椭圆！

border-radius: 50%;

半椭圆

第一种方法：用border-top-left-radius、border-bottom-right……

不过有简写，border-radius可以一次向他提供用空格分隔的多个值，顺序和css常规顺序一样。可以为所有四个角提供完全不同的水平和垂直半径。在斜杠前指定1-4个值。

border-radius: 50% / 100% 100% 0 0;

在这里插入图片描述

沿着y轴劈开的椭圆

border-radius: 100% 0 0 100% / 50%;

在这里插入图片描述

四分之一椭圆

border-radius: 100% 0 0 0;

在这里插入图片描述

以上三个的灵魂就是给四个角指定不同的水平和垂直半径

平行四边形

        background: #fb3;
        width: 300px;
        height: 200px;
        transform: skew(-45deg);

在这里插入图片描述

内容也跟着倾斜了，解决方法：

  1. 两个元素，内容再倾斜回来

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .father {
        margin: 600px;
        background: #fb3;
        width: 300px;
        height: 200px;
        transform: skew(-45deg);
    }

    .content {
        transform: skew(45deg);
    }
</style>

<body>
    <div class="father">
        <div class="content">这是一个平行四边形</div>
    </div>
</body>

</html>

  2. 伪元素方案

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    div {
        width: 200px;
        height: 200px;
        position: relative;
        top: 0;
        left: 0;
        text-align: center;
        margin: 100px;
        line-height: 200px;
    }

    div::before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: -1;
        background: #58a;
        transform: skew(45deg);
    }
</style>

<body>
    <div>这是一个平行四边形</div>
</body>

</html>

    边框外圆角

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    div {
        width: 200px;
        height: 200px;
        position: relative;
        top: 0px;
        left: 0px;
        margin: 100px;
        line-height: 200px;
        border-radius: 15px;
        background: #000;
        background-clip: padding-box;
    }

    div::before {
        width: 100%;
        height: 100%;
        content: '';
        position: absolute;
        top: -10px;
        left: -10px;
        /*之前写了bottom：0； right：0；这样会导致拉伸，这个伪元素会贴的他的父盒子，所以就没有那个边*/
        z-index: -1;
        padding: 10px;
        background: #58a;
        background-clip: border-box;
    }
</style>

<body>
    <div>这是一个平行四边形</div>
</body>

</html>

菱形

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    img {
        clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
    }
</style>

<body>

    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSxWpVtl-jZFomQllemWuwWIwd6uyaZduRD_w&usqp=CAU"
        alt="">

</body>

</html>

点一下还能恢复正方形。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    img {
        clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
        transition: 1s clip-path;/*过渡*/
    }

    img:hover {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }
</style>

<body>

    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSxWpVtl-jZFomQllemWuwWIwd6uyaZduRD_w&usqp=CAU"
        alt="">

</body>

</html>

主要是 clip-path这个属性很有意思

他的值

/* Keyword values */
clip-path: none;

/* <clip-source> values */
clip-path: url(resources.svg#c1);

/* <geometry-box> values */
clip-path: margin-box;
clip-path: border-box;
clip-path: padding-box;
clip-path: content-box;
clip-path: fill-box;
clip-path: stroke-box;
clip-path: view-box;

/* <basic-shape> values */
clip-path: inset(100px 50px);
clip-path: circle(50px at 0 100px);
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
clip-path: path('M0.5,1 C0.5,1,0,0.7,0,0.3 A0.25,0.25,1,1,1,0.5,0.3 A0.25,0.25,1,1,1,1,0.3 C1,0.7,0.5,1,0.5,1 Z');

/* Box and shape values combined */
clip-path: padding-box circle(50px at 0 100px);

/* Global values */
clip-path: inherit;
clip-path: initial;
clip-path: unset;

切角效果

叠加方法

右下角切角

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    div {
        width: 200px;
        height: 200px;
        background: #058a;
        background: linear-gradient(-45deg, transparent 15px, #58a 0);/*想不明白啊qaq*/
    }
</style>

<body>
    <div></div>
</body>

</html>

四个角被切掉

        background: linear-gradient(135deg, transparent 15px, #58a 0) top left,
            linear-gradient(-135deg, transparent 15px, #58a 0) top right,
            linear-gradient(-45deg, transparent 15px, #58a 0) bottom right,
            linear-gradient(45deg, transparent 15px, #58a 0) bottom left;
        background-size: 50% 50%;
        background-repeat: no-repeat;

在这里插入图片描述

弧形切角

div {
        width: 300px;
        height: 200px;
        background: radial-gradient(circle at bottom right, transparent 15px, lightblue 0) bottom right,
            radial-gradient(circle at bottom left, transparent 15px, lightblue 0) bottom left,
            radial-gradient(circle at top left, transparent 15px, lightblue 0) top left,
            radial-gradient(circle at top right, transparent 15px, lightblue 0) top right;
        background-size: 50% 50%;
        background-repeat: no-repeat;
    }

在这里插入图片描述

内联svg与border-image的解决方案

  • svg待学习

裁切路径方案

优点：设置背景方便，可以给图片切角，但是不是DRY的，而且会裁切掉文本

梯形标签页

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    div {
        position: relative;
        display: inline-block;
        padding: .5em 1em .35em;
        color: white;
    }

    div::before {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: -1;
        background: #58a;
        transform: perspective(.5em) rotateX(5deg);
    }
</style>

<body>
    <div>这是一个梯形</div>
</body>

</html>

transform-origin CSS属性让你更改一个元素变形的原点

添加了一些样式

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    div {
        position: relative;
        display: inline-block;
        padding: .5em 1em .35em;
        color: black;
    }

    div::before {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: -1;
        background: #ccc;
        background-image: linear-gradient(hsla(0, 0%, 100%, 0.6), hsla(0, 0%, 100%, 0));
        border: 1px solid rgba(0, 0, 0.4);
        border-bottom: none;
        border-radius: 0.5em 0.5em 0 0;
        box-shadow: 0 0.15em white inset;
        transform: perspective(.5em) rotateX(5deg);
        transform-origin: bottom;
    }
</style>

<body>
    <div>project</div>
</body>

</html>

在这里插入图片描述

transform-origin: left;/*改一下这一句就可以得到单侧倾斜的标签页*/

简单的饼图

基于transform的解决方案

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    div {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background: yellowgreen;
        /*把右边设置成棕色*/
        background-image: linear-gradient(to right, transparent 50%, #655 0);
    }

    /*通过伪元素来起到遮盖的作用*/
    div::before {
        content: "";
        display: inline-block;
        margin-left: 50%;
        height: 100%;
        width: 50%;
        border-radius: 0 100% 100% 0/ 50%;
        transform-origin: left;
        background-color: inherit;
        transform: rotate(.2turn);

    }
</style>

<body>
    <div></div>
</body>

</html>

在这里插入图片描述

		background-color: #655;
        transform: rotate(.2turn);/*百分之七十的范围*/

在这里插入图片描述

动画效果

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    @keyframes spin {
        to {
            transform: rotate(.5turn);
        }
    }

    @keyframes bg {
        50% {
            background: #655;
        }

    }

    div {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background: yellowgreen;
        background-image: linear-gradient(to right, transparent 50%, #655 0);
    }

    /*通过伪元素来起到遮盖的作用*/
    div::before {
        content: "";
        display: inline-block;
        margin-left: 50%;
        height: 100%;
        width: 50%;
        border-radius: 0 100% 100% 0/ 50%;
        transform-origin: left;
        background-color: inherit;
        animation: spin 3s linear infinite,
            bg 6s step-end infinite;

    }
</style>

<body>
    <div></div>
</body>

</html>

角向渐变

background-image: conic-gradient(skyblue 20%, pink 0, pink 40%, yellowgreen 0);

在这里插入图片描述

睡不醒的大南
关注
专栏目录
不规则裁剪图片css,使用CSS的clip-path属性实现不规则图形的显示
weixin_29840657的博客
08-04 953
clip-pathCSS 属性使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏。例子div {width: 200px;height: 200px;background: #6c00af;-webkit-clip-path: polygon(28% 6%,71% 15%,100% 75%,18% 39%,63% 27%,16% 22%,65% 19%);clip-path: pol...
CSS学习 | 《CSS揭秘》读书笔记——第二章
qq_35536883的博客
11-13 230
第二章 背景与边框 1. 半透明边框 使用rgba()和hsla()都可以实现半透明颜色。大部分使用在背景上，而在边框上使用会有一些复杂。 默认情况下，背景会延伸到边框所在的区域下层。 还好在背景与边框（第三版）中，我们可以通过background-clip属性来调整上述行为所带来的不便。 这个属性的初始值是border-box，意味着背景会被元素的border box（边框的外沿框）裁减掉。 如...
css揭秘|第四章：视觉效果
weixin_47029896的博客
04-11 240
单侧投影 单侧投影 只有下侧有投影 box-shadow: 0px 4px 4px -4px red; 只有左侧有投影 box-shadow: -4px 0px 4px -4px red; 只有右侧有投影 box-shadow: 4px 0px 4px -4px red; 只有上侧有投影 box-shadow: 0px -4px 4px -4px red; 邻边投影 box-shadow: 6px 6px 4px red; 双侧投影 box-shadow: -4px 0px 4px -4px re
《CSS揭秘》学习demo：第三章 形状
weixin_30954265的博客
07-28 60
这本书非常实用，我利用这一章所讲的技巧自己做了几个有意思的图标，每个图标都只用一个元素实现。 demo地址：http://codepen.io/Tutaizi/pen/akKQXo/ 转载于:https://www.cnblogs.com/tuzisxy/p/5715351.html...
[CSS]《CSS揭秘》第三章——形状
weixin_33782386的博客
06-29 89
自适应椭圆 border-radius:50% / 50%;//斜杠前为水平半径，后为垂直半径。 background: #fb3; border-radius: 100% 0 0 100%/50%; width: 200px; height: 100px; background: #fb3; ...
CSS 揭秘-阅读笔记:（Ch3-Ch4）
沐风听雨
07-10 646
css从中级到高级的必备技能，初级也能看。 本更主讲元素的形状和页面的视觉效果。你想要的椭圆、菱形和梯形都有详解。视觉主要讲述css投影的相关技巧，是实现图片染色效果的不二之选。
《CSS 揭秘》每章详细读书笔记
jeffery5461的博客
10-20 476
css_jiemi 《CSS 揭秘》读书笔记 一、个人站点 www.freeze61.me 二、使用 将项目克隆下来，可直接在浏览器中运行 pages 中的 html 文件 三、目录结构 具体请移步：https://github.com/lawler61/css-jiemi-notes ...
CSS揭秘（三）形状
whiteGay的博客
10-26 92
Chapter 3 1. 椭圆 椭圆的实现主要依靠 border-radius 属性，该属性确定边框切圆角的半径大小，可以指定数值 px，也可以使用百分比显示 而且该属性非常灵活，四个角可以分别设置...
CSS 揭秘-阅读笔记:（Ch1-Ch2）
沐风听雨
07-10 644
css从中级到高级，初级也能看。
深入浅出 CSS 定位：全面解析与实战指南
2301_79175212的博客
10-04 1642
在当今互联网时代，网页设计不仅需要具备美观的视觉效果，还需确保用户体验的流畅与便捷。而实现这一目标的关键，往往隐藏在细节之中。CSS（层叠样式表）作为前端开发的重要组成部分，其定位（Positioning）机制在布局设计中扮演着至关重要的角色。无论你是初涉前端世界的新手，还是希望提升技能的开发者，掌握 CSS 定位的各种技巧与应用，无疑会为你的网页设计增色不少。本文将以通俗易懂的语言，详细解析 CSS 定位的各类属性，并通过实际案例，助你轻松驾驭这一强大工具。CSS 定位允许你控制 HTML 元素在页面上的
高频CSS总结
qq_51384850的博客
10-10 912
盒模型、BFC、选择器权重计算方式、清除浮动、垂直居中、CSS3新特性、隐藏页面元素、em/px/rem/vh/vw区别、flex布局、CSS提高性能、画一个三角形、两栏布局：左边定宽，右边自适应方案
CSS 布局——清除浮动 （二）
m0_74012211的博客
10-06 434
CSS 布局——清除浮动
CSS3-Day1
m0_74039531的博客
10-10 640
CSS3圆角CSS3盒阴影box-shadowCSS3边界图片CSS3 background-clip属性padding-box 沿着边框填充content-box 在边框外面。
关于css文字下划线动画实现
最新发布
梦雨的博客
10-10 316
【代码】关于css文字下划线动画实现。
css如何制作瀑布流
BANaanaa的博客
10-06 1014
‌瀑布流是一种网站页面布局方式，视觉表现为宽度相等、高度不定的元素组成的参差不齐的多栏布局。‌ 随着页面向下滚动，新的元素会附加到最短的一列，不断向下加载‌。‌参差不齐的排列方式‌：元素的高度各不相同，形成一种动态的视觉效果。‌流式布局的扩展性‌：用户可以不断向下浏览，加载更多内容。‌适用于图片为主的网站‌：常见于一些图片、新闻、博客等内容的展示，有效利用空间，提高用户体验‌纯css写法/* 分为3列 *//* 列之间的间隙 *//* 清除默认的内边距 */padding: 0;
js操作元素的其他操作(4个案例+效果图+代码)
2301_76862031的博客
10-07 607
js操作dom中的其他属性,(4个案例) 拖动小球，时刻获取鼠标指针位置
CSS长度单位：px、ex、vh、vw、vmin、vmax、em、rem
哈
10-07 535
也就是说这样设置的话，每层都要看它的父元素，而这并不总是我们想要的，rem可以来补充em不足。r（root）通常指标签，也就是只要用rem作为单位，都会以标签的设置为基础。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。v（viewpoint）也就是说vh、vw直接对应的是当前视口的尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。vmin表示当前宽和高的小者，vmax则表示当前宽和高的大者。相对长度的单位，相对于当前对象内文本的字体尺寸。
CSS弹性布局
2401_82561004的博客
10-10 706
Flex 是 Flexible Box 的缩写，意为“弹性布局”或者“弹性盒子”，是 CSS3中的一种新的布局模式，可以简便、完整、响应式地实现各种页面布局，当页面需要适应不同的屏幕大小以及设备类型时非常适用。目前，几乎所有的浏览器都支持 Flex布局。
使用css,给下面的html 加上-|||-背景色:蓝色blue-|||-字体大小设置为:16px-|||-宽度:100px-|||-高度:100px-|||-代码如下: ​〈div class=“school”〉培黎职业学院〈／div〉
03-28
```css .school { background-color: blue; font-size: 16px; width: 100px; height: 100px; } ``` 这段CSS代码将会给class为"school"的div元素添加背景色为蓝色（blue），字体大小为16像素（16px），宽度为...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值