- Java 双重比较
- java - 比较器与 Apache BeanComparator
- Objective-C 完成 block 导致额外的方法调用?
- database - RESTful URI 是否应该公开数据库主键?
首先,我刚刚开始学习 HTML 和 CSS。
我想如何使用这段代码: https://codepen.io/martinjkelly/pen/vEOBvL
.container {
width: 250px;
height: 250px;
position:relative;
background-color:grey;
}
.corner {
width: 0;
height: 0;
border-top: 150px solid #ffcc00;
border-bottom: 150px solid transparent;
border-right: 150px solid transparent;
}
.corner span {
position:absolute;
top: 35px;
width: 100px;
left: 5px;
text-align: center;
font-size: 16px;
font-family: arial;
transform: rotate(-45deg);
display:block;
}
<div class="container">
<div class="corner"><span>20% Special Offer</span></div>
</div>
但我想在顶部/右侧制作三 Angular 形。
我尝试过的:
.corner {
width: 0;
height: 0;
border-top: 150px solid transparent;
border-bottom: 150px solid transparent;
border-left: 150px solid transparent;
}
.corner span {
position:absolute;
top: 35px;
width: 100px;
left: 5px;
text-align: center;
color: #ffffff;
text-transform: uppercase;
font-size: 14px;
transform: rotate(45deg);
display:block;
}
它可以工作,但文本放置不正确...
非常感谢您的帮助。
最佳答案
你必须做一些调整,因为三 Angular 形会自然地向左对齐,你不能把它旋转到另一个方向,你还需要使用绝对定位,让它在右边对齐。这也需要对文字的定位做一些调整:
.container {
width: 250px;
height: 250px;
position:relative;
background-color:grey;
}
.corner {
width: 0;
height: 0;
border-top: 150px solid #ffcc00;
border-bottom: 150px solid transparent;
border-left: 150px solid transparent;
position:absolute;
right:0;
}
.corner span {
position:absolute;
top: -110px;
width: 100px;
left: -100px;
text-align: center;
font-size: 16px;
font-family: arial;
transform: rotate(45deg);
display:block;
}
<div class="container">
<div class="corner"><span>20% Special Offer</span></div>
</div>
关于html - 带有 CSS 文本的顶部/直 Angular 三 Angular 形,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48996984/
我需要在 JavaScript 中的笛卡尔坐标和球坐标之间进行转换。我在论坛上浏览了一下,没有找到我要找的东西。 现在我有这个: this.rho = sqrt((x*x) + (y*y) + (z*
有没有matrix3d可以像这样把矩形变成梯形的?我知道常规的 2d 矩阵变换只能以平行四边形结束,因为您只能有效地倾斜和旋转。 div { width: 300px; height:
关于这个例子(d3.j radial tree node links different sizes),我想知道是否可以在 d3.js 中混合径向树和直线树。 对于我的 jsFiddle 示例:htt
我尽量把标题写得最好,但我不确定如何准确描述这里发生的事情,所以请随时更正。 我想使用 › 直 Angular 引号 (›) 而不是 > 直 Angular 引号 (>),虽然 › 字符比 > 短,但
我正在尝试使用 CSS 创建一个具有圆边的矩形棱柱,如下图所示。 到目前为止,我已经指定了顶部和底部的边界半径。问题是我不知道如何让另一边的左右边缘向内 curl 。因此,拐 Angular 处不应有
关闭。这个问题是opinion-based 。目前不接受答案。 想要改进这个问题吗?更新问题,以便 editing this post 可以用事实和引文来回答它。 . 去年关闭。 社区去年审查了是否重
首先,我刚刚开始学习 HTML 和 CSS。 我想如何使用这段代码: https://codepen.io/martinjkelly/pen/vEOBvL .container { width:
我是一名优秀的程序员,十分优秀!