矩形的对角线底部？

时间：2015-04-27 00:57:21

标签： html css wordpress

提前感谢您的帮助。

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

enter image description here

我想尽可能避免使用图片。我想知道如何在CSS的每个导航选择的示例图像中创建这样的框。此导航代码将进入Wordpress安装。我非常欣赏这些专业知识。再次感谢你！

3 个答案:

答案 0 :(得分：2)

好消息，坏消息......

除了CSS之外，使用其他任何东西都可以做到最好 对于足够新的浏览器（即：您不需要IE＆lt; = 8来维护Chrome 42所具有的所有样式），这可以在不使用额外DOM元素的情况下完成。

这也可以使用CSS ...等待它......
buuuut 仅限CSS的版本只能使角度达到设定的宽度。
它不能使角度在任意宽度上伸展，因此按钮必须是相同的长度，或者角度的宽度/高度必须在所有按钮上相同（意味着底部的一部分将是平的，在较长的按钮上。）

仅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>

正如您所看到的，我使用边框底部（蓝色）和边框左侧（透明）创建的三角形非常完美。
border-left的宽度决定了这个效果的宽度，border-bottom的高度决定了它的高度;只是碰巧左边的那个是看不见的 如果那个蓝色设置为与<nav>本身相同的绿色，那么它看起来就像按钮上缺少一个缺口，而不是画了一个角落。

如果你想让这款ES6-8变得友好，你只需要为每个按钮添加1个div（在每个按钮或其他任何按钮之后），然后调整尺寸并使用它的边框。
真的，你需要添加一个div来包含div和按钮（所以容器相对定位，按钮占据了100％的空间，并且油漆芯片绝对位于里面）。登记/> 如果您不关心旧浏览器获取完全相同的视图， ，您实际上不需要自己执行此操作 。

这大部分解决了......

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

如果没有，你可以做多一点。
它并不理想，它并不像它那样美观（比那里更漂亮）但是如果你可以使用JS来做到这一点，你可以保证所有的按钮都会出现在页面之前代码运行，它们的宽度不会改变，你可以这样做：

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

答案 1 :(得分：1)

变换：skewY（deg）;

会像这样扭曲一个div，你可能需要在图层中构建它，然后将文本-deg倾斜以解开文本

简单示例： 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>

答案 2 :(得分：1)

这是使用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>

相关问题
最新问题