html - 我想使用 css 在三 Angular 形中显示图像

标签 html css

<分区>

<img class="triangle" src="image.png"/>

CSS

.triangle{
??}

现在我想将 css 应用于三 Angular 形 class 以在三 Angular 形中显示图像。

最佳答案

我在这里让你成为了一个 fiddle 。你需要用 div 包装你的图像来做你想做的事:

Fiddle .

.triangle{
    position: relative;
}
.triangle:before{
    border-top: 0;
    border-right: 190px solid white;
    border-bottom: 240px solid transparent;
    border-left: 170px solid white;
    position: absolute;
    content: "";
}
<div class='triangle'>
    <img src="http://s.hswstatic.com/gif/landscape-photography-1.jpg"/>
</div>

关于html - 我想使用 css 在三 Angular 形中显示图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33476106/

上一篇:html - Css 动画不适用于转换

下一篇:html - 我如何复制这种效果?

相关文章:

html - 为什么颜色样式在这种情况下不起作用?

javascript - 防止在三个不同的下拉列表中选择相同的值

html - 没有回流的并排响应图像

html - 可滚动的div里面的内容,导致在IE中出现页面滚动条

css - 想要在谷歌地图中有一个 float 窗口。像这样的 : Is there a name for this object?(包含链接/图像。)

html - 如何去除不需要的边距

javascript - js函数加载的页面无法使用js函数加载另一个页面js html

html - 均匀或均等地分配 DIVS……是的,我知道我应该使用表格

html - 更改子菜单的布局

c# - 根据浏览器加载不同的css文件