新增和改进

Question

我有这个：

＆＃13;

.ce_text.forward {
position: relative;
overflow: hidden;
padding: 20px;
background-color: #F8F8F8;
color: #2d353c;
}
.ce_text.forward p {
position: relative;
}
.ce_text.forward .fill_bottom {
width: 500px;
height: 500px;
bottom: 0;
left: -865px;
position: absolute;
margin: auto;
background-color: #ecedee;
top: 0px;
right: 0;
transition: left 0.3s linear 0s;
transform: rotate(45deg);
}
.ce_text.forward:hover .fill_bottom {
left: 0;
}

＆＃13;

<div class="ce_text forward block"><div class="fill_bottom"></div>

  
      <p><a href="" target="_blank"><strong>Headline</strong>Test Test test test<span>Lesen Sie mehr</span></a></p>  
  
  
</div>

＆＃13;

它适用于chrome但不适用于firefox，有人可以帮助我使用css吗？

Fiddle

Answer 1

Firefox中的问题似乎是由margin: auto的使用引起的。我完全重建了你的例子以消除这种情况。

新增和改进

没有固定的高度。高度由百分比（可以修改）和最小高度控制。
无额外加价。使用伪元素创建三角形并旋转。文本以<a>包装器为中心。
居中的三角形。三角形的中心位于任何高度bottom: 50%，负底边距为其高度的一半。

无间隙 - 三角形足够大，可以消除角落中的任何间距。如果你需要它更大，它可以根据需要大小;只保持高宽比1：1并增加负底边距的大小。

＆＃13;

* {
    margin: 0;
    padding: 0;
}
html, body {
    height: 100%;
}
h1 {
    background: #333;
    height: 40%;
    min-height: 140px;
    position: relative;
    overflow: hidden;
    z-index: 0;
}
h1 a {
    display: block;
    height: 100%;
    position: absolute;
    top: 50%;
    margin-top: -0.56em;
    left: 100px;
}
h1:before {
    content:'';
    display: block;
    position: absolute;
    bottom: 50%;
    margin-bottom: -1000px;
    left: -2000px;
    height: 2000px;
    width: 2000px;
    background: #F00;
    transform: rotate(45deg);
    transition: left 0.3s;
    z-index: -1;
}
h1:hover:before {
    left: 0;
}

＆＃13;

<h1><a>Text</a></h1>

＆＃13;

旧解决方案

已存档 - 固定高度选项（无转换，应返回IE8）

我接触的方式不同：

右三角形和条形图由伪元素构成，并以百分比定位
z-index: -1将伪元素保留在文本后面。
overflow: hidden会在三角形被推到外面时阻止滚动条。

＆＃13;

* {
	margin: 0;
	padding: 0;
}

.headline {
	height: 100px;
	background: #333;
	color: #FFF;
	position: relative;	
	z-index: 2;
	display: inline-block;
	width: 100%;
	height: 0;
	padding: 30px 0 70px 50px;
        overflow: hidden;
}
.headline:before {
	width: 30%;
	content:'';
	display: block;
	height: 100px;
	background: #F00;
	position: absolute;
	top:0;
	left: 0;
	transition: all 0.3s linear 0s;
	z-index: -1;
}
.headline:after {
	content: '';
	display: block;
	border-bottom: solid 50px transparent;
	border-top: solid 50px transparent;
	border-left: solid 50px #F00;
	height: 0;
	width: 0;
	left: 30%;
	position: absolute;
	top:0;	
	transition: all 0.3s linear 0s;
	z-index: -1;
}
.headline:hover:before {
	width: 100%;
}
.headline:hover:after {
	left: 100%;
}

＆＃13;

<h1 class="headline">Text</h1>

＆＃13;

中心绝对定位div垂直？

1 个答案:

新增和改进

旧解决方案