是可能的css sqaure /矩形有右边看起来像一个三角形 [英] is it possible for a css sqaure/rectangle to have the right side to look like a triangle right

问题描述

我想知道它是否能够有一个正方形，在右边有一个点像这样在一个CSS：

I was wondering if its able to have a square that has a point on the right side of it something like this in just one css:

http://prntscr.com/59wn94

我试图做一个只是通过使用一个div，我不能够操作足够它更容易为创建一个正方形，然后只是添加一个三角形到它。但我想要的东西，只是在css像正方形和三角形的组合权利。

I tried to make one just by using one div I wasn't able to manipulate enough its much easier for when creating a square then just add up a triangle right to it. but I want something that is on just on css like a combination of square and triangle-right.

以下是我的 http://jsfiddle.net/ wbZet / 1311 / 。

<div id="nav">
    <a>PLAY</a>
</div>
<div id="triangle-up" />

#triangle-up {
    width: 0;
    height: 0;
    border-left: 35px solid red;
    border-bottom: 25px solid transparent;
    border-top: 25px solid transparent;    
    float: left;
}
#nav {
    float:left;
    display: block;
    height:50px;
    padding: 0px 10px;
    background: red;
}
#nav a {
    margin: 25px 0px;
}

推荐答案

https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elementsrel =nofollow>伪元素 - CSS

Use Pseudo-elements - CSS

div{
  position: relative;/*it important to set this to relative to be able to use :before in absolute*/
  width: 60px;
  height: 40px;
  background: red
}

div:before{
  content: '';
  position:absolute;
  left: 100%;
  top: 0;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-left: 20px solid red

}

<div>Play</div>

这篇关于是可能的css sqaure /矩形有右边看起来像一个三角形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！