CSS？这个箭是怎么制作的？ [英] CSS? How is this arrow made?

问题描述

这让我发疯。我一直在使用Firefox检查器来尝试弄清楚在。

如您所见，该元素是一个正方形（相同的高度 / 宽度）。该元素的绝对位置为 left：50％和-的 margin-left 负数- 31px （宽度的一半），用于水平居中。最后，使用 transform：rotation（-45deg）旋转正方形。

以下是使用的样式：

  .home-testimonial-wrapper：before 
 .home-cta-area :: before，{
显示：块； 
宽度：62像素； 
高度：62像素； 
背景：＃253031； 
头寸：绝对； 
 top：-15px； 
剩余：50％； 
保证金：0 0 0 -31px; 
 z-index：5； 
内容：； 
 -webkit-transform：旋转（-45deg）; 
 -ms-transform：旋转（-45deg）; 
 -moz-transform：旋转（-45deg）; 
 transform：rotation（-45deg）; 
} 
  

除此之外，如果您有兴趣了解如何制作三角形使用CSS，请参见此答案。

This is driving me insane. I've been using the Firefox inspector to try to figure out how this arrow was made (below) on the Headway site.

I've whittled away the code by deleting chunks via the inspector, and got it down to this:

No matter where I inspect, I can not find any such shape. No background image, no glyphs, nothing. It hardly even matters at this point, but I'm pulling my hair out trying to figure out how they did this!

Any CSS gurus care to take a look and chime in? For the sake of learning. :)

解决方案

It's just a rotated square in the form of a ::before pseudo element.

As you can see, the element is a square (same height/width). The element is absolutely positioned with left: 50% and a negative margin-left of -31px (half the width) for horizontal centering. Finally, transform: rotate(-45deg) is used to rotate the square.

Here is the styling used:

.home-testimonial-wrapper:before
.home-cta-area::before, {
    display: block;
    width: 62px;
    height: 62px;
    background: #253031;
    position: absolute;
    top: -15px;
    left: 50%;
    margin: 0 0 0 -31px;
    z-index: 5;
    content: "";
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

Aside from this, if you're interested in seeing how to make a triangle using CSS, see this answer.

这篇关于CSS？这个箭是怎么制作的？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！