css3 三角形 中心点 |css中如何使图片在右上角

// 以下是一个利用CSS3创建三角形的例子：
.triangle {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-right: 50px solid #555;
}
// 这段CSS代码将创建一个宽高为0的三角形，并使用border属性为它添加样式。注意到这个三角形的中心点是在其左下方，这对于定位或使用translate属性旋转时可能会产生问题。

为了确保三角形在中心点处垂直居中，并且可以方便地定位或使用transform属性进行操作，大家可以使用如下技巧：

.triangle {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-right: 50px solid #555;
transform: translateY(50%);
position: relative;
top: -25px;
left: -25px;
}
// 这段CSS代码将使三角形在中心点处垂直居中，并且可以更容易地定位和使用transform属性。

总之，在创建CSS3三角形时，要特别注意它的中心点，如果不正确设定可能会导致一些奇怪的行为。为了确保您的设计看起来美观，始终要考虑三角形的中心点。