盒子内 CSS 中的三角形 [英] Triangle in CSS inside a box

问题描述

嗯，我不知道如何正确解释.在这里，检查此屏幕截图，其中包含我想要制作的内容.我的设计师给了我这个.如果我找不到解决方案，我将使用图像而不使用代码.可以用 CSS3 做到这一点吗?

.

或此处的完整集成示例.

Well I don't know how to explain it correctly. Here, check this screenshot which has what I want to make. My designer gave me this. If I don't find a solution i'll use images and no code. Is it possible to do this with CSS3?

Here is the image

See the triangle inside that box? I want to do this. Thank you!

解决方案

Creative use of borders to achieve this effect, no images were harmed in the following sample and you can even set the position of the arrow on the element itself - becomes more straightforward if you can hardcode it for your design.

HTML

<div class="top">
    <span class="arrow" style="left:40%"></span>
</div>

CSS

.top {
    background:url(http://blog.positscience.com/wp-content/uploads/2013/08/ice-cream3.jpg);
    background-size:cover;
    width:300px;
    height:300px;
    border:1px solid #888;
    position:relative;
    overflow:hidden;
}
.arrow {
    border:30px solid #aaa;
    border-bottom:none;
    border-color:transparent #aaa transparent #aaa;
    position:absolute;
    left:0;
    bottom:0;
}
.arrow:before, .arrow:after {
    content:'';
    position:absolute;
    width:5000px;
    bottom:0;
    height:30px;
    background:#aaa;
}
.arrow:before {
    right:30px;
}
.arrow:after {
    left:30px;
}

Working JSfiddle sample.

Or the full integrated sample here.

这篇关于盒子内 CSS 中的三角形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！