gpt4 book ai didi

html - 带有 CSS 的圆形标签形状

转载 作者:太空狗 更新时间:2023-10-29 15:56:39 24 4
gpt4 key购买 nike

我正在尝试用 html/css 创建这个形状:

enter image description here

我的要求是:

  • body 背景可能会因页面而异,因此不能使用 alpha mask 图像
  • 悬停时背景颜色可转换
  • 形状的所有 Angular 都是圆的

如果有尖 Angular ,你可以用 css 三 Angular 形来做,但是圆 Angular 的给我带来麻烦。

到目前为止我在 HTML 中的内容:

<ul class="tags">
<li><a href="#">Lorem</a></li>
<li><a href="#">Ipsum</a></li>
<li><a href="#">Longer text in tag</a></li>
<li><a href="#">Dolor</a></li>
</ul>

在 CSS 中:

.tags {
list-style: none;
margin: 0;
padding: 1em;
}
.tags li {
display: inline-block;
margin-right: 2em;
position: relative;
}
.tags a {
background: #283c50;
color: #fff;
display: block;
line-height: 1em;
padding: 0.5em;
text-decoration: none;

-webkit-border-radius: 10px 0 0 10px;
-moz-border-radius: 10px 0 0 10px;
border-radius: 10px 0 0 10px;

-webkit-transition: background 200ms ease;
-moz-transition: background 200ms ease;
-o-transition: background 200ms ease;
-ms-transition: background 200ms ease;
transition: background 200ms ease;
}
.tags a:before {
background: #283c50;
content: "";
height: 1.75em;
width: 1.75em;
position: absolute;
top: 0.1em;
right: -0.87em;
z-index: -1;

-webkit-transform: rotate(40deg);
-moz-transform: rotate(40deg);
-o-transform: rotate(40deg);
-ms-transform: rotate(40deg);
transform: rotate(40deg);

-webkit-border-radius: 0.625em;
-moz-border-radius: 0.625em;
-o-border-radius: 0.625em;
-ms-border-radius: 0.625em;
border-radius: 0.625em;

-webkit-transition: background 200ms ease;
-moz-transition: background 200ms ease;
-o-transition: background 200ms ease;
-ms-transition: background 200ms ease;
transition: background 200ms ease;
}
.tags a:hover,
.tags a:hover:before {
background: #1eaa82;
}

它只在 Chrome 上看起来不错。对于其他人,三 Angular 形位置存在差异,或者三 Angular 形和实际标签在不同时间发生转换。参见示例 http://jsfiddle.net/hfjMk/1/

这甚至可能/可行吗?还是我必须放弃过渡并为三 Angular 形部分使用图像?

最佳答案

你可以为此使用一个旋转的伪元素:

div {
height: 50px;
width: 150px;
border-radius: 10px 0 0 10px;
position: relative;
background: tomato;
text-align:center;
line-height:50px;
}
div:before {
content: "";
position: absolute;
top: -4px;
right: -41px;
height: 41px;
width: 41px;
transform-origin: top left;
transform: rotate(45deg);
background: tomato;
border-radius: 10px;
}
<div>Text</div>

关于html - 带有 CSS 的圆形标签形状,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19112004/

24 4 0