Question

我希望在我的网站右上角（固定位置）制作一个三角形按钮。它只是一个带有悬停效果的背景颜色顶部的图标。我想知道是否有办法获得一个有角度的div或者它是否需要成为背景图像？

CSS

#top-btn {
  position: fixed;
  top: 0;
  right: 0;
  background-color: red;
}

HTML

...

<div id="top-btn">icon</div>

编辑 - 视觉表现。位于窗口右上方

Answer 1

针对旋转文字右侧的三角形进行了更新

使用边框技巧在CSS中创建一个三角形： 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 - 注意调整三角形大小和颜色的注释;另外，如果您不想旋转文本，请删除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;
}

Answer 2

基本上，您创建宽度和高度为零的元素，并使用边框创建三角形。

[ enter image description here ]

本文分享了一些代码。 https://css-tricks.com/snippets/css/css-triangle/

.arrow-down {
    width: 0; 
    height: 0; 
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;

    border-top: 20px solid #f00;
}

Answer 3

.triangle {
  border-width: 50px;
  border-style: solid;
  border-color: red red transparent transparent;
  position: fixed;
  top:0;
  right:0;
  width:0;
  height:0;
}

Working fiddle.

Answer 4

如果您在不使用图片的情况下询问如何制作三角形，则会出现以下html字符：▲▲和▼▼

您还可以通过制作宽度和高度为零的元素在css中制作三角形，并仅在3个边上设置边框，其中2个边是透明的。

.arrow-down {
    width: 0; 
    height: 0; 
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid black;
}

这里有更多细节 https://css-tricks.com/snippets/css/css-triangle/

Answer 5

这就是我提出的：

.corner{
    width: 0; 
    height: 0; 
    border-top: 50px solid rgb(227, 37, 37);
    border-bottom: 50px solid transparent; 
    border-left: 50px solid transparent; 
    border-right:50px solid rgb(227, 37, 37); 
    float:right; 
}

.corner:hover{
    border-color: #A00404 #A00404 transparent transparent;
    transition: border-color 1s;
}

Here is the JSfiddle demo

Answer 6

根据您需要做什么，最简单的方法是使用如下字符：▴

你不能只是复制和粘贴它。在代码中使用以下内容来显示此字符：

&utrif;

它可能不适合所有情况，但我已经使用过它。它与其他任何文本一样容易放置，您可以轻松调整大小，应用颜色，背景或阴影，因为它只是文本。

这里列出了您可以使用的所有字符，当然取决于您使用的字体，我认为这将限制此方法：

http://dev.w3.org/html5/html-author/charref

另一个限制是，如果您想在其上放置文字或图标。我确定这是可能的，但如果你的意图有更好的方法。

创建一个角落按钮div

6 个答案: