我尝试了不同的方法,但我找不到任何方法通过HTML,CSS做这样的事情。 目前我有:
HTML:
<div id="intro-slogan">
<div id="diagonal"></div>
</div>
CSS:
#intro-slogan{
display: inline-block;
margin-top: 5em;
clear: both;
height: 100%;
}
#diagonal{
background: red;
width: 18em;
height: 1px;
transform: rotate(-60deg);
}
我想要这样的事情:
答案 0 :(得分:3)
小提琴:https://jsfiddle.net/avakqez9/1/
<div class="one">
<h1>The Jocky</h1>
</div>
<div class="two">
<h1>of Mocky</h1>
</div>
<强> CSS 强>
div{
vertical-align: middle;
display: inline-block;
}
.one{
overflow: hidden;
margin-top: -1px;
transform: rotate(10deg);
border-right: 1px solid #000;
}
.one h1 {
margin-right: -20px;
transform: rotate(-10deg);
}
.two h1{
color: orange;
margin: 40px 0 0 -10px;
}
答案 1 :(得分:2)
您可以尝试将每个原始div包装在容器中,使用transform CSS3属性(检查skewX和skewY)来倾斜容器,并将内容div向相反方向倾斜(这样您就可以保留内容不倾斜)。
在那之后,也许overflow:hidden
和一些玩弄边缘/填充物的人最终可以做到这一点。
答案 2 :(得分:0)
尝试使用position:absolute
,z-Index
,border
属性,使用span
元素作为#intro-slogan
的后代来定位文字&#34;给予&#34 ;低于文字&#34;礼物&#34;
#intro-slogan {
display: inline-block;
margin-top: 5em;
clear: both;
height: 100%;
z-Index:0;
font-size:24px;
}
#intro-slogan span {
position:absolute;
top:145px;
left:74px;
}
#diagonal {
background: red;
width: 18em;
height: 1px;
transform: rotate(-60deg);
position:absolute;
left:-140px;
z-Index:10;
border:2px solid #fff;
}
&#13;
<div id="intro-slogan">
The gift<div id="diagonal"></div><span>of giving</span>
</div>
&#13;
答案 3 :(得分:0)
对于那些仍然需要的人,我是这样做的: HTML:
<div class='centerMe'>
<div class='skew1'>
<div class='text part-1'>
<span>the Gift</span>
</div>
</div>
<div class='skew2'>
<div class='text part-2'>
<span>of Giving</span>
</div>
</div>
</div>
CSS:
.skew1,
.skew2{
overflow: hidden;
height: 300px;
cursor: pointer;
position: relative;
width: 27em;
float: left;
transform: skew(-20deg);
-o-transform: skew(-20deg);
-ms-transform: skew(-20deg);
-moz-transform: skew(-20deg);
-webkit-transform: skew(-20deg);
}
.text{
top: 50%;
color: #fff;
right: 60px;
font-size: 2em;
position: absolute;
display: inline-block;
transform: skew(20deg);
-o-transform: skew(20deg);
-ms-transform: skew(20deg);
-moz-transform: skew(20deg);
-webkit-transform: skew(20deg);
}
.skew2:before{
content:'';
top: 55%;
left: 0px;
width: 2px;
height: 100px;
position: absolute;
background-color: #fff;
transform: translateY(-50%);
-o-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
}
.centerMe{
top: 50%;
left: 50%;
min-width: 1200px;
position: absolute;
transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
}