blocks|key|3743027|text|是，使用border-radius属性。但是，border-radius是一个CSS3属性。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3743028|entityMap^0|4|D|N|D|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|M|8|@]|D|@]|E|$]]]|G|$]]

Yes, use the <code>border-radius</code> property. But, <code>border-radius</code> is a CSS3 property.

blocks|key|5210970|text|在这里你可以使用负的边框半径|type|unstyled|depth|inlineStyleRanges|entityRanges|data|5210971|http://lea.verou.me/2011/03/beveled-corners-negative-border-radius-with-css3-gradients/|offset|length|5210972|它可能并不是在所有浏览器中都兼容，您最安全地使用图像作为向外半径|5210973|更新我的答案以使用没有负半径http://jsfiddle.net/peter/QTS6N/1/的纯CSS|5210974|entityMap|0|LINK|mutability|MUTABLE|url|1|http://jsfiddle.net/peter/QTS6N/1/^0|0|0|2F|0|0|0|E|Y|1|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@]|9|@$D|U|E|V|1|W]]|A|$]]|$1|F|3|G|5|6|7|X|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|Y|8|@]|9|@$D|Z|E|10|1|11]]|A|$]]|$1|J|3|-4|5|6|7|12|8|@]|9|@]|A|$]]]|K|$L|$5|M|N|O|A|$P|C]]|Q|$5|M|N|O|A|$P|R]]]]

Here you can use negative border radiuses

<a href="http://lea.verou.me/2011/03/beveled-corners-negative-border-radius-with-css3-gradients/" rel="nofollow">http://lea.verou.me/2011/03/beveled-corners-negative-border-radius-with-css3-gradients/</a>

It may not be compliant in all browsers, your safest using images for the outward radius

Updating my answer to use pure CSS without negative radius
<a href="http://jsfiddle.net/peter/QTS6N/1/" rel="nofollow">http://jsfiddle.net/peter/QTS6N/1/</a>

blocks|key|1427422|text|你可以尝试使用“负边界半径”，基本上是径向渐变(可能不是跨浏览器兼容的，但可能值得使用图形)。看看this+article吧。祝好运!|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1427423|entityMap|0|LINK|mutability|MUTABLE|url|http://lea.verou.me/2011/03/beveled-corners-negative-border-radius-with-css3-gradients/^0|1D|C|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

You can try it using 'negative border radius', basically radial gradients (may not be cross-browser compatible tho, may be worth it to just use graphics). Take a look at <a href="http://lea.verou.me/2011/03/beveled-corners-negative-border-radius-with-css3-gradients/" rel="nofollow">this article</a>. Good luck!

blocks|key|3743136|text|最好的方法是在菜单项上覆盖一个元素，该元素本身就有一个边界半径。此元素必须具有与菜单容器相同的背景颜色。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3743137|这些覆盖应该使用伪类:before和:after来完成。它们也有一个很棒的browser+support。|offset|length|style|CODE|3743138|HTML：|3743139|<ul+class="tabs">
++++<li><a+href="#">Archive</a></li>
++++<li><a+href="#">Forum</a></li>
++++<li><a+href="#">Store</a></li>
++++<li><a+href="#">Patv</a></li>
</ul>
<br+style="clear:both;"+/>+|code-block|syntax|javascript|3743140|CSS:|BOLD|3743141|.tabs+{+/*+generates+the+grey+line+on+the+very+top+*/
++++width:+100%25;
++++height:+5px;
++++background:+grey;
}

.tabs+li+{
++++list-style-type:+none;
++++float:+left;
}

.tabs+li:first-child+{
++++margin-left:+30px;+/*+This+is+just+to+move+the+menu+to+the+left,+for+demo+purposes+*/
}

.tabs+a+{
++++text-underline:+none;
++++color:+black;
++++line-height:+30px;
++++padding:+10px+20px;
++++border-bottom-left-radius:+10px;
++++border-bottom-right-radius:+10px;
++++background:+grey;
}

.tabs+a:after,+.tabs+li:first-child+a:before+{
++++content:+'';
++++width:+4px;
++++height:+25px;
++++background:+white;+/*+This+has+to+be+the+background+color+of+the+container.+Change+it+to+red+to+see+the+pseudo+elements+*/+
++++position:+absolute;
++++margin-top:+5px;
++++margin-left:+-3px;
++++border-radius:+10px;
}

.tabs+a:after+{
++++margin-left:+18px;
}|3743142|这是一个演示：http://jsfiddle.net/rGubz/|3743143|entityMap|0|LINK|mutability|MUTABLE|url|http://css-tricks.com/browser-support-pseudo-elements/|1|http://jsfiddle.net/rGubz/^0|0|A|7|I|6|11|F|0|0|0|0|0|4|0|0|7|Q|1|0^^$0|@$1|2|3|4|5|6|7|15|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|16|8|@$D|17|E|18|F|G]|$D|19|E|1A|F|G]]|9|@$D|1B|E|1C|1|1D]]|A|$]]|$1|H|3|I|5|6|7|1E|8|@]|9|@]|A|$]]|$1|J|3|K|5|L|7|1F|8|@]|9|@]|A|$M|N]]|$1|O|3|P|5|6|7|1G|8|@$D|1H|E|1I|F|Q]]|9|@]|A|$]]|$1|R|3|S|5|L|7|1J|8|@]|9|@]|A|$M|N]]|$1|T|3|U|5|6|7|1K|8|@]|9|@$D|1L|E|1M|1|1N]]|A|$]]|$1|V|3|-4|5|6|7|1O|8|@]|9|@]|A|$]]]|W|$X|$5|Y|Z|10|A|$11|12]]|13|$5|Y|Z|10|A|$11|14]]]]

The best way to do this is to overlay an element over the menu items, that has a border-radius itself. This element has to have the same background color as the container of the menu.

Those overlays should be done with the pseudo classes <code>:before</code> and <code>:after</code>. Those also have a great <a href="http://css-tricks.com/browser-support-pseudo-elements/" rel="nofollow">browser support</a>.

HTML:

<pre><code>&lt;ul class="tabs"&gt;
 &lt;li&gt;&lt;a href="#"&gt;Archive&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="#"&gt;Forum&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="#"&gt;Store&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="#"&gt;Patv&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;br style="clear:both;" /&gt; &lt;!-- I didn't have an other element to clear the floats with --&gt;
</code></pre>

CSS:

<pre><code>.tabs { /* generates the grey line on the very top */
 width: 100%;
 height: 5px;
 background: grey;
}

.tabs li {
 list-style-type: none;
 float: left;
}

.tabs li:first-child {
 margin-left: 30px; /* This is just to move the menu to the left, for demo purposes */
}

.tabs a {
 text-underline: none;
 color: black;
 line-height: 30px;
 padding: 10px 20px;
 border-bottom-left-radius: 10px;
 border-bottom-right-radius: 10px;
 background: grey;
}

.tabs a:after, .tabs li:first-child a:before {
 content: '';
 width: 4px;
 height: 25px;
 background: white; /* This has to be the background color of the container. Change it to red to see the pseudo elements */ 
 position: absolute;
 margin-top: 5px;
 margin-left: -3px;
 border-radius: 10px;
}

.tabs a:after {
 margin-left: 18px;
}
</code></pre>

Here's a demo: <a href="http://jsfiddle.net/rGubz/" rel="nofollow">http://jsfiddle.net/rGubz/</a>

below is an image of what I'm talking about:

<img src="https://i.stack.imgur.com/XJbph.png" alt="enter image description here">

Can I make this with pure CSS?

UPDATE: I've created divs with rounded corners (using border-radius) on the upper right and left corners and placing them between the tabs. Still looking for a more elegant solution.

how to create tabs with arches between them?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

下面是我正在讨论的内容的图像：​​我能用纯CSS做这件事吗？更新:我已经创建了在右上角和左上角有圆角(使用边界半径)的div，并将它们放在选项卡之间。仍然在寻找一种更优雅的解决方案。

问如何创建带有拱门的标签？
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何创建带有拱门的标签？EN