Question

此后我已经搜索了一个多小时。我试图找到如何设计div的外观。

http://i.gyazo.com/b3e39c4d80c74e559e832c4d22bb87c2.png

图片显示左侧带有“箭头”侧的黑色div。你是如何制作这些东西的？

Answer 1

这是一种快速实现此目的的方法。

css

#frame{
    width:90%;
    border: 20px solid lightblue;
    background:black;
}
.title{
    font-size:3em;
    position:absolute;
    color:white;
    top: 60px;
    margin-left:80px;
}
.arrow-right {
    width: 0; 
    height: 0; 
    border-top: 60px solid transparent;
    border-bottom: 60px solid transparent;

    border-left: 60px solid lightblue;
}

HTML

<div id="frame">
<div class="arrow-right"></div>
<div class="title">Some text here!</div>
</div>

Answer 2

我会使用倒箭头（使用顶部和底部边框的边框黑客）来实现此目的。您还可以将其作为伪元素的一部分，以便您的标记保持干净。

@import url(http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:200);
body {
    background: #BCDEB1;
}
h1 {
    font-family: 'Yanone Kaffeesatz';
    float:right;
    background: black;
    position: relative;
    color: white;
    padding: 0.5em 0.5em;
    line-height: 1em;

    margin-right: 0.1em;
    box-shadow: 0.1em 0.1em 0em 0 rgba(0, 0, 0, 0.2);
}

h1:after {
    content: '';
    position: absolute;
    right: 100%;
    top: 0;
    border: 0 solid black;
    border-left: 0.5em solid transparent;
    border-top-width: 1em;
    border-bottom-width: 1em; /* 1 + 1 = 2.  The parent is 1em line height + 0.5em top padding + 0.5em bottom padding */
    
    box-shadow: 0.1em 0.1em 0em 0 rgba(0, 0, 0, 0.2);
}

<h1>Administration and etc?</h1>

Answer 3

因为三角形是有角度的，所以可能值得将SVG视为content伪元素的:before。

这是我几乎只使用CSS完成的codepen。 http://codepen.io/anon/pen/dPVERJ

您可能需要调整一下才能使其看起来与图像完全一样。我使用cssarrowplease生成基本箭头并从那里调整它。

另见http://css-tricks.com/snippets/css/css-triangle/

在问这里之前我会谷歌这样的东西，这是一个已被多次弄清楚的问题。

CSS3改变div风格

3 个答案: