CSS剪裁角落？

Question

有没有一种简单的方法来设计这样的元素？

应该在移动设备上使用，所以完全可以使用CSS3。我想不出一个简单的方法。图片是不可行的。

必须是这个块状的，并且应该有一个文本 (这是一个块状的8位按钮)。

- Max

---

你是想要圆角还是去除它们上面的小正方形呢？ - mikevoermans

一幅图片通常价值千言万语，但在这种情况下，您需要更多的话来解释这张图片。或者您实际上想要确切地展示什么？ - gilly3

是的，这就是整个重点。在角落上从背景中减去正方形。这是一个 8 位浏览器游戏的一部分。希望你们明白为什么我需要这种像积木一样的外观 :) 这个元素里应该有一些文本。 - Max

不同的宽度，固定的高度 http://imm.io/kZvh http://imm.io/kZvn - Max

我刚刚更新了我的回答，就我所知它满足了你的所有要求！ - Greg Pettit

Answer 1

这是基于feeela的思路，但有所改进。

1. 相较于使用有色块覆盖，这里只增加了红色元素，使背景透过显示。但是，为了正确计算它们的角落(以便它们是正方形)，我必须设置一个固定的高度。可能有一些使用百分比的诡异方法，但为了证明概念，考虑这种方法会让人头疼。由于要求是固定高度和可变宽度，这个方法应该有效。

2. 伪元素需要有内容，否则它们将“折叠”。内容可以为空，但该属性需要被设置。

CSS:

/* main button block */
.button {
    display:inline-block;
    background: #f00;
    position: relative;
    line-height: 60px;
    text-align: center;
    padding: 0 20px;
    height: 60px;
    margin-left: 0.5em;
}

/* common background color to all */
.button, .button::before, .button::after {
    background-color: #f00;
}

/* shared styles to make left and right lines */
.button::before, .button::after {
    content: "";
    position: absolute;
    height: 50px;
    width: 5px;
    top: 5px;

}

/* pull the left 'line' out to the left */
.button::before {
    left: -5px;
}

/* pull the right 'line' out to the right */
.button::after {    
    right: -5px;
}

​

Fiddle: http://jsfiddle.net/3R9c5/2/

- Greg Pettit

---

太棒了！完美无缺！谢谢，兄弟！ - Max

没关系！这是一项令人愉快的挑战。 :-) - Greg Pettit

Answer 2

这个怎么样？HTML代码如下：this。

<div class="block">(text goes here)</div>

CSS：

body {background:#1990D7;}
.block {background:#FF1200; line-height:52px; margin:8px auto; width:359px;
   position:relative; text-align:center; font-weight:bold; color:yellow}
.block::before {display:inline-block; background:#FF1200; content:'';
   position:absolute; top:4px; left:-4px; bottom:4px; width:4px;}
.block::after {display:inline-block; background:#FF1200; content:'';
   position:absolute; top:4px; right:-4px; bottom:4px; width:4px;}

编辑：根据对问题需求的最新了解进行更新。

- Mr Lister

---

是的，因为使用4像素的圆角，外边缘将比主矩形小8像素。嗯，如果我们将额外的矩形应用于左侧和右侧而不是顶部和底部，那会起作用吗？高度固定吗？ - Mr Lister

我在那里没有看到任何HTML，但这是一个新的小工具，在这里，侧面不依赖于主块的宽度或高度：http://jsfiddle.net/tmWdx/3/ - Mr Lister

Answer 3

您可以通过添加伪元素::before或::after来插入这四个角落中的每一个。

例如：

.button {
    background: #f00;
    position: relative;
}

/* corner top left */
.button::after {
    position: absolute;
    top: 0; left: 0;
    width: 5px; height: 5px;
    background: #00f;
}

/* corner top right */
.button::after {
    position: absolute;
    top: 0; right: 0;
    width: 5px; height: 5px;
    background: #00f;
}

/* corner bottom left */
/* … */

- feeela

---

我喜欢这种方法的开端。麻烦的部分是找出如何获得第四个角落。;-) 可能需要添加一个额外的标记来完成它。哎呀，还有它似乎根本不起作用：http://jsfiddle.net/3R9c5/ - Greg Pettit

背景可能会不同，我在这个页面上有一个渐变背景 :( 是的，我知道，8位和渐变就像 whaaaaaaaa。但是。 - Max

@GregPettit 你的意思是使用bottom:0; right:0;来放置最后一个角落吗？我想不出这会有什么问题。为什么需要更多的标记呢？ - hradac

@hradac 因为那里确切的内容是什么？您有主要元素(.button)，它是一个红色矩形。您有 ::after 伪元素用于其中一个“减去”块，以及 ::before 用于另一个块。想一想，我们已经少了两个块。如果没有更多的标记，其他两个块从哪里来呢？无论如何，如果必须对块进行字面上的减法运算(而不是减法的幻象)，以便渐变背景可以显示出来，则这种方法将无法正常工作。但是您可以尝试在上方和下方分别加一条线。 - Greg Pettit

我不喜欢减去角落的想法。如果元素周围的背景不应该是纯色的（在这种情况下为#00f），那怎么办？ - Mr Lister

Answer 4

也许this可以帮助你。或者你可以添加一个新的类，例如“cadre”

.cadre
{
 border-radius: 10px;
}

将其添加到您的CSS文件中，然后将其应用于div。

- Aminesrine

Answer 5

我认为 border-radius 无法实现这个效果。以下是我能想到的最简单的方法：

http://jsfiddle.net/DpLdt/

CSS：

body {
background:blue;
}
div#clipcorners {
width:500px;
height:200px;
background:red;
position:relative;
margin:100px auto;
}
span#a,span#b {
position:absolute;
width:10px;
height:180px;
top:10px;
background:red;
}
span#a {
left:-10px;
}
span#b {
right:-10px;
}

​

HTML：

<div id="clipcorners">
<span id="a">
</span>
<span id="b">
</span>
</div>​

- henryaaron

Answer 6

CSS的border-radius属性

- Spyros Mandekis

---

一个像素是一个正方形，但我猜你不是指这个 - 所以你的答案是：不会。Border-radius将创建圆角边框。 - feeela

答案不正确，实际上没有看到这些正方形！ - Spyros Mandekis