保持三角形边缘可见，其余部分隐藏答案

【问题标题】：Keep triangles edges visible and the rest hidden保持三角形边缘可见，其余部分隐藏
【发布时间】：2015-06-22 20:04:49
【问题描述】：

我正在制作一个动画，当我们将鼠标悬停在三角形上时，三角形会移动并显示之前隐藏的内容。

它工作正常，但没有响应，在我的电脑上很好，但是当我调整窗口大小时，三角形出现在屏幕中间或随机位置，我怎样才能保持位置，以便只有黑色三角形可见?

我的代码，以防万一：

body{
    height:100%;
    background-color: grey;
}

/* AVISO :: Começo da animação trianglo lado esquerdo :: AVISO  */

#container {
	top:35%;
	margin-left: -19.5%;
	background-color: transperent;
	width:355px;
}

.pencil-body {
	  background-color: red;
	  display: inline-block;
	  padding: 75px;
	  width: 100px;
}

.pencil-tip {
	  width: 0;
	  height: 0;
	  border-top: 75px solid transparent;
	  border-left: 100px solid black;
	  border-bottom: 75px solid transparent;
	  display: inline-block;
}

#container:hover {
    transform: translate(200px,0);
    -webkit-transform: translate(200px,0); /** Chrome & Safari **/
}

/* AVISO :: Fim da animação trianglo lado esquerdo :: AVISO  */

/* AVISO :: Começo da animação trianglo lado direito :: AVISO  */

#container2 {
	float:right;
	margin-left:92.5%;
	top:35%;
	width:355px;
}

.pencil-body2 {
	float:right;
	  background-color: red;
	  display: inline-block;
	  padding: 75px;
	  width: 100px;
}

.pencil-tip2{
	  width: 0;
	  height: 0;
	  border-top: 75px solid transparent;
	  border-right: 100px solid black;
	  border-bottom: 75px solid transparent;
}

#container2:hover {
    transform: translate(-200px,0);
    -webkit-transform: translate(0px,200); /** Chrome & Safari **/
}

/* AVISO :: Fim da animação trianglo lado direito :: AVISO  */

.animation {
    position: absolute;
    transition: all 2s ease-in-out;
    -webkit-transition: all 2s ease-in-out; /** Chrome & Safari **/
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> Teste1 </title>
<link href="styles.css" rel="stylesheet" type="text/css">
</head>

<body style="overflow: hidden;">

<div id="container" class="animation"> 

<div class="pencil-body"></div>
<div class="pencil-tip"></div>

</div>

<div id="container2" class="animation"> 

<div class="pencil-body2"></div>
<div class="pencil-tip2"></div>

</div>

</body>



</body>
</html>

【问题讨论】：

标签： css animation transform

【解决方案1】：

你应该使用

left: -255px;

和

right: -255px;

而不是使用边距。

例如：

#container {
    left: -255px;
}

#container2 {
    right: -255px;
}

如果可以的话，你也应该使用 html5。这是基本设置

<!DOCTYPE html>
<html>
    <head>
       <meta charset="UTF-8>
       <title>title</title>
    </head>
    <body>
        ...
    </body>
</html>

示例： http://jsbin.com/lihuzoxube/edit?html,css,output

【讨论】：