网站链接: 我爱捣鼓
当前位置: 首页 > 前端开发 > css

css实现图文特殊混排效果

2022/5/24 22:25:41

简单的图文混排我们应该都接触过,如果我们通过css想实现如下的图文特殊混排效果,应该怎么实现呢?<html><head><meta charset="UTF-8"><link rel="apple-touch-icon" type="image/png"href="https://cpwebasse…

        简单的图文混排我们应该都接触过,如果我们通过css想实现如下的图文特殊混排效果,应该怎么实现呢?

image.png

<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)”网站的内容,希望对大家有所帮助!引用本文内容时,请注明出处!谢谢合作!


相关资讯

  • 设置英文首字母大写的css属性是什么?

    设置CSS text-transform 的属性为capitalize就可以实现英文首字母大写。 定义和用法  text-transform 属性控制文本的大小写。 属性值 值 描 述 none 默认。定义带有小写字…

    2021/7/14 20:35:17
  • 只让页面显示横滚动条,不显示竖滚动条如何实现?

    只让页面显示横滚动条,不显示竖滚动条的方法其实很简单,主要用到body的两个css属性 overflow和 overflow-y,如下所示:body { overflow:scroll; overflow-y:hidden;}

    2021/2/28 21:45:25
  • 网页的滚动条样式可以修改吗?如何修改?

    网页的滚动条样式可以修改的,主要是使用css来控制那如何修改呢?如下代码:<div class="inner"> <div class="innerbox"> <p style="height:200px;">这是内容111</p> <p style="hei…

    2021/2/28 21:15:24
  • css如何实现6张图片均匀排列在一行?

    css部分如下:img{width:120px; height:80px;float:left;margin-right:16px;}.img3{margin-right:0;}html部分如下:<img src="images/001.jpg" /><img src="images/002.jpg" /><img src="images/003.jpg" /><img src=…

    2021/2/28 21:10:01