是否可以在CSS中创建一个有角度的角？ [英] Is it possible to create an angled corner in CSS?

问题描述

我想知道是否有任何方式来创建这个形状与纯CSS。为了进一步扩展这个问题，这个形状需要剪辑图像里面的内容（认为它是一个掩码 - 但灰色边框必须可见）。

I am wondering if there is any way to create this shape with pure CSS. To extend this problem further, this shape needs to clip the image inside (think of it as a mask - but the grey border has to be visible).

或者我最好在canvas / svg？

Or am I better off creating this in canvas/svg?

推荐答案

这是一个有点困难保持边框，但我设法达到一个紧密的效果使用：后的元素与父容器（：before和：after不工作的img标签）

It's a little difficult keeping the border, but I managed to achieve a close effect using :before and :after elements with a parent container (:before and :after don't work on an img tag)

1. 添加边框

1. Add a border to the container

添加一个以前挡住角落并偏移-1以覆盖边框

Add a before to block out a corner and offset by -1 to cover the border

添加一个稍微偏离之前的内容，以在剪切内创建线

Add an after that's slightly offset from the before to create the line inside the cut off

你可以看到，45deg行的厚度有点问题：

As you can see, the thickness of the 45deg line is a bit of an issue:

.cutCorner {
    position:relative; background-color:blue; 
    border:1px solid silver; display: inline-block;
}

.cutCorner img {
    display:block;
}

.cutCorner:before {
    position:absolute; left:-1px; top:-1px; content:'';
    border-top: 70px solid silver;
    border-right: 70px solid transparent;
}

.cutCorner:after {
    position:absolute; left:-2px; top:-2px; content:'';
    border-top: 70px solid white;
    border-right: 70px solid transparent;
}

<div class="cutCorner">
    <img class="" src="https://www.google.co.uk/logos/doodles/2013/william-john-swainsons-224th-birthday-5655612935372800-hp.jpg" />
</div>

JSFiddle

这篇关于是否可以在CSS中创建一个有角度的角？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！