2

CSSのみを使用し、可能であれば画像を使用せずに、外観のようなタブまたはラベルを作成したいと思います。これが私が意味することです：

ラベル

片方の端を作成することはできますが、三角形の点を作成できませんでした。CSSだけでこれを行うことは可能ですか？

4

5 に答える 5

3

CSSの三角形を作成する方法は確かにあります。これは、css-tricks.comの一部です。

.arrow-right {
   width: 0; 
   height: 0; 
   border-top: 60px solid transparent;
   border-bottom: 60px solid transparent;
   border-left: 60px solid green;
}

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

于 2012-10-16T01:10:50.337 に答える
2

はい。ただし、IE7をサポートしている間はそうではありません。

<a class="tab">Your label text</a>

.tab {
    background: black;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    position: relative;
}
.tab::before {
    content: " ";
    position: absolute;
    right: 100%;
    top: 0;
    width: 0;
    height: 0;
    border-width: 35px; /* play with this value to match the height of the tab */
    border-style: solid;
    border-color: transparent black transparent transparent;
}
于 2012-10-16T01:15:14.520 に答える
1

これは良い始まりになるはずです http://css-tricks.com/snippets/css/css-triangle/

于 2012-10-16T01:11:03.810 に答える
1

HTML

<div class="arrow-left"></div>
<div class="arrow-body"></div>

CSS

.arrow-left {   float:left;  width: 0;      height: 0;      border-top: 20px solid transparent;     border-bottom: 20px solid transparent;           border-right:20px solid blue;  }
.arrow-body{ float:left; width:200px; height:40px;  background-color:Blue;}
于 2012-10-16T01:14:43.810 に答える
0

ここに別のものがあります

<div></div>​

div{
    width:500px;
    height:100px;
    background-color:black;
    border-top-right-radius:10px;
    border-bottom-right-radius:10px;
    margin-left:100px;
}
div:before{
    width:0;
    height:0;
    content:"";
    display:inline-block;
    border-top:50px solid transparent;
    border-right:100px solid black;
    border-bottom:50px solid transparent;
    position:absolute;
    left:0;
}

http://jsfiddle.net/e8feE/

于 2012-10-16T01:35:14.627 に答える