文章/答案/技术大牛

发布

社区首页 >问答首页 >矩形上的对角底部？

问矩形上的对角底部？
EN

Stack Overflow用户

提问于 2015-04-27 08:57:21

回答 3查看 958关注 0票数 1

提前感谢您的帮助。

我花了很多时间在网络和这个论坛上寻找一个解决方案，让我的导航按钮有一个对角的底部。下面是一个示例：

如果可能的话，我想避免使用图片。我想知道如何在示例图像中使用CSS为每个导航选项创建一个类似于此的框。这个导航代码将会进入Wordpress的安装中。我真的很感谢你的专业知识。再次感谢您！

html

css

wordpress

回答 3

Stack Overflow用户

发布于 2015-04-27 12:08:52

好消息，坏消息..。

只需使用CSS就可以完成大部分工作。

对于足够新的浏览器(例如:你不需要IE<=8来维护Chrome42拥有的所有样式)，这可以在不使用额外的DOM元素的情况下完成。

这也可以通过使用CSS ...wait来完成。

CSS-only版本只能设置角度的宽度。不支持。

它不能让角度在任意宽度上伸展，所以要么按钮的长度必须相同，要么所有按钮的角度的宽度/高度都必须相同(这意味着在较长的按钮上，底部的一部分将是平的)。

仅使用CSS的解决方案(足够好吗？)

nav {
  background-color: green;
  padding: 20px;
}

nav > button {
  background-color: rgb(60, 60, 60);
  color: rgb(120, 120, 120);
  position: relative;
  border-radius: none;
  border: none;
  padding: 20px;
}

nav > button:after {
  content: "";
  width: 0;
  height: 0;
  right: 0;
  bottom: 0;
  position: absolute;
  border-left: 60px solid transparent;
  border-bottom: 15px solid blue;
}

<nav >
  <button >About</button>
  <button >Bios</button>
</nav>

我让颜色变得明显是有原因的。

为了获得作弊的完整体验，我将通过更改左侧边框的颜色来使解决方案更加明显：

在幕后看

    nav {
      background-color: green;
      padding: 20px;
    }

    nav > button {
      background-color: rgb(60, 60, 60);
      color: rgb(120, 120, 120);
      position: relative;
      border-radius: none;
      border: none;
      padding: 20px;
    }

    nav > button:after {
      content: "";
      width: 0;
      height: 0;
      right: 0;
      bottom: 0;
      position: absolute;
      border-left: 60px solid red;
      border-bottom: 15px solid blue;
    }

    <nav >
      <button >About</button>
      <button >Bios</button>
    </nav>

正如您所看到的，我使用底部边框(蓝色)和左侧边框(透明)创建的三角形几乎是完美的。

左边框的宽度决定了这个效果的宽度，底部边框的高度决定了高度；只是左边的那个是看不见的。

如果蓝色设置为与<nav>本身相同绿色，那么它看起来就像按钮上缺少了一个凹口，而不是被涂上了一个角。

如果你想让它对ES6-8友好，你只需要为每个按钮添加1个div (在每个按钮之后)，然后调整大小并使用它的边框。

实际上，您还需要添加一个div来包含div和按钮(因此容器是相对定位的，按钮占据了100%的空间，并且画片绝对位于内部)。

如果你不关心老的浏览器得到完全相同的视图，你真的不需要对自己的做这个。

这就是解决问题的大部分方法。

如果你可以说“我的主题的最小按钮是60px，所以一个60px的三角形就可以了”，那就太棒了。改变颜色，你就完成了。

如果没有，您还可以做更多的事情。

JS + CSS (足够好了！)

(function () {
var nav;
var buttons;
var style;
var styleText;

function getElWidth (el) { return el.getBoundingClientRect().width; }

function borderLeftText (width, i) {
  return ["nav > button:nth-child(", i + 1, "):after { border-left: ", width, "px solid transparent; }"].join(""); 
}

function getStyleEntries (els) {
  return els.map(getElWidth).map(borderLeftText);
}


try {
  nav = document.querySelector("nav");
  buttons = [].slice.call(nav.querySelectorAll("button"));
  style = document.createElement("style");

  styleText = getStyleEntries(buttons).join("\n");
  style.textContent = styleText;
  document.head.appendChild(style);
}


catch (err) {
// because the same browsers that will blow up won't support the CSS anyway; 
// don't fix it, just move on
// good code shouldn't do this, but that's another story
}
}());

nav {
      background-color: green;
      padding: 20px;
    }

    nav > button {
      background-color: rgb(60, 60, 60);
      color: rgb(120, 120, 120);
      position: relative;
      border-radius: none;
      border: none;
      padding: 20px;
    }

    nav > button:after {
      content: "";
      width: 0;
      height: 0;
      right: 0;
      bottom: 0;
      position: absolute;
      border-left: 60px solid transparent;
      border-bottom: 15px solid green;
    }

<nav >
      <button >About</button>
      <button >Bios</button>
    </nav>

在这里，我基本上抓取了目前存在的所有按钮，并编写了自己的CSS文件，其中充满了

nav > button:nth-child(1):after { /*...*/ }
nav > button:nth-child(2):after { /*...*/ }

然后将包含该文本的<style>标记附加到<head>。

在每个选择器中只有一个规则；border-left宽度将设置为按钮的实际宽度(以像素为单位)。

条款和条件

现在你得到了你想要的东西，但是它需要JS，在代码运行之前按钮必须在页面上，并且宽度不能改变(通过样式，或者通过媒体查询，等等)。如果发生这两种情况中的任何一种，并且您希望保持角落的更新，则需要再次运行该代码。

如果是这种情况，应该特别注意缓存和重用style标记，这样页面上就不会有8个具有相同规则的标记。

结论

如果你对大部分--好，那就只用CSS吧。

如果您知道修复不需要实时响应，或者可以应用于越来越多的动态添加的按钮，那么可以使用JS + CSS。如果这两种方法都不够好，请使用.svg或.png

票数 2

Stack Overflow用户

发布于 2015-04-27 09:20:44

变换: skewY(deg)；

将像那样倾斜一个-deg，您可能需要在层中构建它，然后倾斜文本div以消除文本倾斜。

简单的例子：https://jsfiddle.net/uex2umac/

.wrapper{
    width:500px;
    height:300px;
    background-color:#000;
    overflow:hidden;
}

.tobeskew{
    width:280px;
    height:220px;  
    margin-bottom:0px;
    background-color:#f1f;
    text-align:center;
    transform:skewY(-15deg);
}
p{
    transform:skewY(15deg);
    line-height:220px;
    font-size:40px;
    color:#fff;
}

<Div class="wrapper">
    <div class="tobeskew">
        <p>Hello</p>
    </div>
</div>

票数 1

Stack Overflow用户

发布于 2015-04-27 10:07:17

这里有一个使用SVG背景图像的解决方案。请注意，使用SVG需要IE9+ ...

BODY
{
    background-color: #333;
}


.button
{
    float:left;
    float: left;
    font-family: sans-serif;
    font-weight: bold;
    font-size: 44px;
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 115' preserveAspectRatio='none'><polygon points='0 0 100 0 100 100 0 115' fill='%23282828'/></svg>");
    background-size: 100% 100%;
    color: #999;
    height: 110px;
    line-height: 96px;
    padding: 0 50px;
    margin-right: 10px;
}

.button.selected
{
    color: #fbac31;
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 115' preserveAspectRatio='none'><polygon points='0 0 100 0 100 100 0 115' fill='black'/></svg>");
}

<div class="button">
    <div>ABOUT</div>
</div>
<div class="button selected">
    <div>BIOS</div>
</div>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/29885529

复制

相似问题

问矩形上的对角底部？
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问矩形上的对角底部？EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问矩形上的对角底部？
EN