我想在我网站的右上角(固定位置)制作一个三 Angular 形按钮。它只是具有悬停效果的背景颜色之上的图标。我想知道是否有办法获得倾斜的 div,或者它是否需要作为背景图片?
CSS
#top-btn {
position: fixed;
top: 0;
right: 0;
background-color: red;
}
HTML
...
<div id="top-btn">icon</div>
编辑 - 视觉表示。位于窗口右上角
最佳答案
更新了右侧的三 Angular 形,带有旋转的文本
使用边框技巧在 CSS 中创建三 Angular 形: DEMO
HTML:
<div id="corner-triangle">
<div class="corner-triangle-text"><a href="http://shop.mimijumi.com/" target="_blank"><span class="corner-triangle-firstline">Free</span><br>Shipping!</a></div>
</div>
CSS - 用于调整三 Angular 形大小和颜色的注释注释;另外,如果您不想旋转文本,请删除 transform: rotate(45)
行:
div#corner-triangle {
display: block;
width: 100px;
height: 100px;
border-style: solid;
border-width: 0 200px 200px 0; /* adjust for size of triangle */
border-color: transparent #da0039 transparent transparent; /* adjust for color of triangle */
position: fixed;
top: 0;
right: 0;
z-index: 99999;
color: white;
text-shadow: 0 0 25px 9px #fff;
-webkit-filter: drop-shadow(0 1px 9px #000000);
filter: drop-shadow(0 1px 9px #000000);
}
div#corner-triangle .corner-triangle-text {
position: relative;
font-size: 2.1em;
top: 0;
right: -90px;
font-family: sans-serif, "Helvetica Neue", Helvetica, Arial;
font-weight: 200;
line-height: 1.1;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
div#corner-triangle .corner-triangle-text span.corner-triangle-firstline {
margin-left: 29px;
}
div#corner-triangle .corner-triangle-text a {
color: white;
}
div#corner-triangle .corner-triangle-text a:hover,
div#corner-triangle .corner-triangle-text a:link,
div#corner-triangle .corner-triangle-text a:visited,
div#corner-triangle .corner-triangle-text a:active,
div#corner-triangle .corner-triangle-text a:focus {
text-decoration: none;
}
关于javascript - 创建 Angular 按钮 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31818328/