CSS-将多个div切割，通过定位实现一个图案

最新推荐文章于 2024-05-10 10:46:48 发布

boboj1

最新推荐文章于 2024-05-10 10:46:48 发布

阅读量1.3k

点赞数 1

分类专栏： CSS 文章标签： css 定位 html 前端

本文链接：https://blog.csdn.net/Wind_AN/article/details/109523870

版权

本文介绍了如何利用CSS的clip-path属性，结合HTML div元素的定位，来创建一个大象图案。通过在Photoshop中取色并确定比例，可以精确地裁剪div，从而实现图案的构造。

摘要由CSDN通过智能技术生成

CSS-将多个div切割，通过定位实现一个图案

通过CSS3中clip-path属性来实现个大象
在这里插入图片描述
同过clip-path对div进行裁剪时可以利用PS对原图片进行取色并获取一定的比例。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>大象</title>
    <link rel="stylesheet" href="/elephant.css">
</head>
<body>
    <div class="container">
        <div class="item1"></div>
        <div class="item2"></div>
        <div class="item3"></div>
        <div class="item4"></div>
        <div class="item5"></div>
        <div class="item6"></div>
        <div class="item7"></div>
        <div class="item8">