html – 框内的CSS中的三角形

概述好吧,我不知道如何正确解释它.在这里,查看我想要制作的截图.我的设计师给了我这个.如果我找不到解决方案,我将使用图像而不使用代码.用 CSS3可以做到这一点吗？ Here is the image 看到那个盒子里面的三角形？我想做这个.谢谢！ 创造性地使用边框来实现这种效果,在下面的示例中没有图像受到损害,您甚至可以在元素本身上设置箭头的位置 – 如果您可以为您的设计进行硬编码,则会变得更加直截了 好吧,我不知道如何正确解释它.在这里,查看我想要制作的截图.我的设计师给了我这个.如果我找不到解决方案,我将使用图像而不使用代码.用 CSS3可以做到这一点吗？

Here is the image

看到那个盒子里面的三角形？我想做这个.谢谢！

解决方法 创造性地使用边框来实现这种效果,在下面的示例中没有图像受到损害,您甚至可以在元素本身上设置箭头的位置 – 如果您可以为您的设计进行硬编码,则会变得更加直截了当.

HTML

<div >    <span  ></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.

总结

以上是内存溢出为你收集整理的html – 框内的CSS中的三角形全部内容，希望文章能够帮你解决html – 框内的CSS中的三角形所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。