css shape-outside 多边形文字环绕

最新推荐文章于 2024-10-13 08:49:06 发布

小张也被占用

最新推荐文章于 2024-10-13 08:49:06 发布

阅读量3.7k

点赞数 2

本文链接：https://blog.csdn.net/qq_40047198/article/details/89087084

版权

shape-outside

实用场景：

圆形：

第一个值代表半径

shape-outside: circle(50%);

椭圆：

第一个值代表半径；第二个值代表半径

shape-outside: ellipse(60px 80px);

多边形：

最少3个值，也就是说，至少要3个点组成一个三角形，每个点有x，y方向移动的两个值（均从左上方开始移动）。

shape-outside: polygon(0 0,100% 100%,0 100%);（三角形）

shape-outside: polygon(100px 0,200px 60px,200px 120px,100px 200px,0 120px,0 60px);（六边形）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    .wrap{
      width: 400px;
      background: #232323;
      padding: 20px;
      margin-bottom: 30px;
      margin-right: 30px;
      float: left;
    }
    p{
      padding: 0;
      margin: 0;
      line-height: 24px;
      color: #fff6;
    }
    .shapes {
      float: left;
      width: 250px;
      height: 250px;
      margin-right: 20px;
    }
    .shapes img{
      width: 100%;
      height: 100%;
    }
    .shapes1 {
      shape-outside: circle(50%);
      overflow: hidden;
      border-radius: 50%;
    }
    .shapes2 {
      width:200px;
      shape-outside: ellipse(100px 125px);
      overflow: hidden;
      border-radius: 50%;
    }
    .shapes3 {
      shape-outside: polygon(0 0,100% 100%,0 100%);
      position: relative;
    }
    .shapes3~p{
      color:#666;
      position: relative;
      z-index: 3;
    }
    .shapes3:after{
      content: '';
      display: block;
      width: 354px;
      height:353px;
      background: #232323;
      position: absolute;
      top:-175px;
      left:71px;
      z-index: 2;
      transform: rotate(45deg) ;
    }
  </style>
</head>
<body>
<div class="wrap">
  <div class="shapes shapes1">
    <img src="img/img.jpg">
  </div>
  <p>纤云弄巧</p>
  <p>飞星传恨</p>
  <p>银汉迢迢暗度</p>
  <p>金风玉露一相逢</p>
  <p>便胜却人间无数</p>
  <p>柔情似水</p>
  <p>佳期如梦</p>
  <p>忍顾鹊桥归路</p>
  <p>两情若是久长时</p>
  <p>又岂在朝朝暮暮</p>
</div>
<div class="wrap">
  <div class="shapes shapes2">
    <img src="img/img.jpg">
  </div>
  <p>纤云弄巧</p>
  <p>飞星传恨</p>
  <p>银汉迢迢暗度</p>
  <p>金风玉露一相逢</p>
  <p>便胜却人间无数</p>
  <p>柔情似水</p>
  <p>佳期如梦</p>
  <p>忍顾鹊桥归路</p>
  <p>两情若是久长时</p>
  <p>又岂在朝朝暮暮</p>
</div>
<div class="wrap" style="overflow: hidden">
  <div class="shapes shapes3">
    <img src="img/img.jpg">
  </div>
  <p>纤云弄巧</p>
  <p>飞星传恨</p>
  <p>银汉迢迢暗度</p>
  <p>金风玉露一相逢</p>
  <p>便胜却人间无数</p>
  <p>柔情似水</p>
  <p>佳期如梦</p>
  <p>忍顾鹊桥归路</p>
  <p>两情若是久长时</p>
  <p>又岂在朝朝暮暮</p>

</body>
</html>