简单的图文混排我们应该都接触过，如果我们通过css想实现如下的图文特殊混排效果，应该怎么实现呢？
<html>
<head>
<meta charset="UTF-8">
<link rel="apple-touch-icon" type="image/png"
href="https://cpwebassets.codepen.io/assets/favicon/apple-touch-icon-5ae1a0698dcc2402e9712f7d01ed509a57814f994c660df9f7a952f3060705ee.png">
<meta name="apple-mobile-web-app-title" content="CodePen">
<link rel="shortcut icon" type="image/x-icon"
href="https://cpwebassets.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico">
<link rel="mask-icon" type="image/x-icon"
href="https://cpwebassets.codepen.io/assets/favicon/logo-pin-8f3771b1072e3c38bd662872f6b673a722f4b3ca2421637d5596661b4e2132cc.svg"
color="#111">
<title>css实现图文混排效果www.woaidaogu.com</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<style>
* {
position: relative;
}
html {
font-weight: 300;
}
h1,
h2 {
background: tomato;
font-size: 3rem;
line-height: 5rem;
color: #fff;
shape-outside: content-box;
shape-margin: 1rem;
margin: 30vh 2rem 0 -30vw;
float: left;
max-width: 60%;
border-radius: 1rem;
}
h2 {
background: cadetblue;
float: right;
margin: 70vh -29vw 0 0;
}
.izq {
background: tomato;
float: left;
width: 30%;
height: 100vh;
-webkit-clip-path: polygon(0% 0%, 90% 0%, 10% 100%, 0 100%);
clip-path: polygon(0% 0%, 90% 0%, 10% 100%, 0 100%);
shape-outside: polygon(0% 0%, 90% 0%, 10% 100%, 0 100%);
shape-margin: 1rem;
}
.dch {
background: cadetblue;
float: right;
width: 30%;
height: 100vh;
-webkit-clip-path: polygon(90% 0%, 100% 0%, 100% 100%, 10% 100%);
clip-path: polygon(90% 0%, 100% 0%, 100% 100%, 10% 100%);
shape-outside: polygon(90% 0%, 100% 0%, 100% 100%, 10% 100%);
shape-margin: 1rem;
}
p {
padding: 20px;
font-size: 1.4rem;
line-heigh: 2;
font-weight: 300;
text-align: justify;
}
</style>
<script>
window.console = window.console || function (t) { };
</script>
<script>
if (document.location.search.match(/type=embed/gi)) {
window.parent.postMessage("resize", "*");
}
</script>
</head>
<body translate="no">
<div></div>
<div></div>
<h1>奇妙的 shape-outside</h1>
<h2>--- Cocoqiao</h2>
<p>Then, the frontal lobes and right hemisphere break down the intention of the speaker and look at things such as
body language, tone of voice, and facial expression to interpret differences between the actual meaning of the
word and this specific social context of the word.
And lastly, the right ventromedial prefrontal cortex makes a decision on whether or not the comment is sarcastic
based off of our social and emotional interpretation.
Then, the frontal lobes and right hemisphere break down the intention of the speaker and look at things such as
body language, tone of voice, and facial expression to interpret differences between the actual meaning of the
word and this specific social context of the word.
And lastly, the right ventromedial prefrontal cortex makes a decision on whether or not the comment is sarcastic
based off of our social and emotional interpretation.
Then, the frontal lobes and right hemisphere break down the intention of the speaker and look at things such as
body language, tone of voice, and facial expression to interpret differences between the actual meaning of the
word and this specific social context of the word.
And lastly, the right ventromedial prefrontal cortex makes a decision on whether or not the comment is sarcastic
based off of our social and emotional interpretation.
Then, the frontal lobes and right hemisphere break down the intention of the speaker and look at things such as
body language, tone of voice, and facial expression to interpret differences between the actual meaning of the
word and this specific social context of the word.
And lastly, the right ventromedial prefrontal cortex makes a decision on whether or not the comment is sarcastic
based off of our social and emotional interpretation.
</p>
</body>
</html>通过以上内容我们知道了css如何实现图文特殊混排效果？感谢您访问“我爱捣鼓(www.woaidaogu.com)”网站的内容，希望对大家有所帮助！引用本文内容时，请注明出处！谢谢合作！
