css实现图片斜切文字布局效果-html代码-BFW代码库

css实现图片斜切文字布局效果

代码语言：html

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700");
body {
  background: -webkit-gradient(linear, left top, right top, from(white), to(#dddddd));
  background: linear-gradient(90deg, white, #dddddd);
  padding: 1.5rem;
  font-family: "Open Sans", sans-serif;
  color: #444;
}

img {
  float: left;
  width: 100%;
  -webkit-transform: translateX(-30%);
          transform: translateX(-30%);
  shape-outside: polygon(40% 0%, 50% 50%, 70% 100%);
  shape-margin: 2rem;
  -webkit-clip-path: polygon(30% 0, 70% 0, 100% 100%, 30% 100%);
          clip-path: polygon(30% 0, 70% 0, 100% 100%, 30% 100%);
}

p {
  font-size: 1.3rem;
  line-height: 1.5;
}
@media (min-width: 600px) {
  p {
    font-size: 1.5rem;
    line-height: 1.7;
  }
}
p:first-child {
  margin-top: 0;
}
</style>

</head>
<body translate="no">
<img src="http://repo.bfw.wiki/bfwrepo/image/5e5ee65e0573a.png" />
<p>Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do: once or twice she had peeped into.........完整代码请登录后点击上方下载按钮下载查看