blocks|key|4549396|text|这比其他建议更容易解决。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4549397|只需绘制一个正方形，并将border属性应用于两个连接的边。|offset|length|style|CODE|4549398|然后根据希望箭头指向的方向旋转正方形，例如：transform:+rotate(<your+degree+here>)|4549399|​|4549400|.triangle+{
++++border-right:+10px+solid;+
++++border-bottom:+10px+solid;
++++height:+30px;
++++width:+30px;
++++transform:+rotate(-45deg);
}|code-block|syntax|javascript|4549401|<div+class="triangle"></div>|4549402|4549403|entityMap^0|0|C|6|0|M|11|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|V|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|W|8|@$D|X|E|Y|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|Z|8|@$D|10|E|11|F|G]]|9|@]|A|$]]|$1|J|3|K|5|6|7|12|8|@]|9|@]|A|$]]|$1|L|3|M|5|N|7|13|8|@]|9|@]|A|$O|P]]|$1|Q|3|R|5|N|7|14|8|@]|9|@]|A|$O|P]]|$1|S|3|K|5|6|7|15|8|@]|9|@]|A|$]]|$1|T|3|-4|5|6|7|16|8|@]|9|@]|A|$]]]|U|$]]

<p>This can be solved much easier than the other suggestions.</p>

<p>Simply draw a square and apply a <code>border</code> property to just 2 joining sides.</p>

<p>Then rotate the square according to the direction you want the arrow to point, for exaple: <code>transform: rotate(&lt;your degree here&gt;)</code></p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.triangle {
    border-right: 10px solid; 
    border-bottom: 10px solid;
    height: 30px;
    width: 30px;
    transform: rotate(-45deg);
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="triangle"&gt;&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|42628|text|只需使用before和after+Pseudo-elements+-+CSS|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|42629|​|42630|*{box-sizing:+border-box;+padding:+0;+margin:+0}
:root{background:+white;+transition:+background+.3s+ease-in-out}
:root:hover{background:+red+}
div{
++margin:+20px+auto;
++width:+150px;
++height:+150px;
++position:relative
}

div:before,+div:after{
++content:+'';
++position:+absolute;
++width:+75px;
++height:+20px;
++background:+black;
++left:+40px
}

div:before{
++top:+45px;
++transform:+rotateZ(45deg)
}

div:after{
++bottom:+45px;
++transform:+rotateZ(-45deg)
}|code-block|syntax|javascript|42631|<div/>|42632|42633|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/CSS/::before|1|https://developer.mozilla.org/en-US/docs/Web/CSS/::after|2|https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements^0|4|6|0|B|5|1|H|L|2|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Z|8|@]|9|@$A|10|B|11|1|12]|$A|13|B|14|1|15]|$A|16|B|17|1|18]]|C|$]]|$1|D|3|E|5|6|7|19|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|1A|8|@]|9|@]|C|$I|J]]|$1|K|3|L|5|H|7|1B|8|@]|9|@]|C|$I|J]]|$1|M|3|E|5|6|7|1C|8|@]|9|@]|C|$]]|$1|N|3|-4|5|6|7|1D|8|@]|9|@]|C|$]]]|O|$P|$5|Q|R|S|C|$T|U]]|V|$5|Q|R|S|C|$T|W]]|X|$5|Q|R|S|C|$T|Y]]]]

<p>Just use <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/::before">before</a> and <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/::after">after</a> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements">Pseudo-elements - CSS</a> </p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>*{box-sizing: border-box; padding: 0; margin: 0}
:root{background: white; transition: background .3s ease-in-out}
:root:hover{background: red }
div{
  margin: 20px auto;
  width: 150px;
  height: 150px;
  position:relative
}

div:before, div:after{
  content: '';
  position: absolute;
  width: 75px;
  height: 20px;
  background: black;
  left: 40px
}

div:before{
  top: 45px;
  transform: rotateZ(45deg)
}

div:after{
  bottom: 45px;
  transform: rotateZ(-45deg)
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div/&gt;</code></pre>
</div>
</div>
</p>


blocks|key|42663|text|>本身就是一个非常奇妙的箭头！只需在div前面加上它并设置样式即可。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|42664|​|42665|div{
++font-size:50px;
}
div::before{
++content:">";
++font:+50px+'Consolas';
++font-weight:900;
}|code-block|syntax|javascript|42666|<div+class="arrowed">Hatz!</div>|42667|42668|entityMap^0|0|1|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@$9|S|A|T|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|U|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|V|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|J|7|W|8|@]|D|@]|E|$K|L]]|$1|O|3|G|5|6|7|X|8|@]|D|@]|E|$]]|$1|P|3|-4|5|6|7|Y|8|@]|D|@]|E|$]]]|Q|$]]

<p><code>&gt;</code> itself is very wonderful arrow! Just prepend a div with it and style it.</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>div{
  font-size:50px;
}
div::before{
  content:"&gt;";
  font: 50px 'Consolas';
  font-weight:900;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="arrowed"&gt;Hatz!&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|42729|text|使用Roko+C.+Buljan+box-阴影技巧使用带有悬停效果的左右箭头|type|unstyled|depth|inlineStyleRanges|entityRanges|data|42730|​|42731|.arr+{
++display:+inline-block;
++padding:+1.2em;
++box-shadow:+8px+8px+0+2px+#777+inset;
}
.arr.left+{
++transform:+rotate(-45deg);
}
.arr.right+{
++transform:+rotate(135deg);
}
.arr:hover+{
++box-shadow:+8px+8px+0+2px+#000+inset
}|code-block|syntax|javascript|42732|<div+class="arr+left"></div>
<div+class="arr+right"></div>|42733|42734|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|P|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

<p>Left Right Arrow with hover effect using Roko C. Buljan box-shadow trick</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.arr {
  display: inline-block;
  padding: 1.2em;
  box-shadow: 8px 8px 0 2px #777 inset;
}
.arr.left {
  transform: rotate(-45deg);
}
.arr.right {
  transform: rotate(135deg);
}
.arr:hover {
  box-shadow: 8px 8px 0 2px #000 inset
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="arr left"&gt;&lt;/div&gt;
&lt;div class="arr right"&gt;&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|42692|text|我需要在我的项目中将input更改为箭头。下面是最终的工作。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|42693|​|42694|#in_submit+{
++background-color:+white;
++border-left:+#B4C8E9;
++border-top:+#B4C8E9;
++border-right:+3px+solid+black;
++border-bottom:+3px+solid+black;
++width:+15px;
++height:+15px;
++transform:+rotate(-45deg);
++margin-top:+4px;
++margin-left:+4px;
++position:+absolute;
++cursor:+pointer;
}|code-block|syntax|javascript|42695|<input+id="in_submit"+type="button"+class="convert_btn">|42696|42697|这里是Fiddle|42698|entityMap|0|LINK|mutability|MUTABLE|url|https://jsfiddle.net/mostafas/d1w6u717/2/^0|A|5|0|0|0|0|0|3|6|0|0^^$0|@$1|2|3|4|5|6|7|Z|8|@$9|10|A|11|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|12|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|13|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|J|7|14|8|@]|D|@]|E|$K|L]]|$1|O|3|G|5|6|7|15|8|@]|D|@]|E|$]]|$1|P|3|Q|5|6|7|16|8|@]|D|@$9|17|A|18|1|19]]|E|$]]|$1|R|3|-4|5|6|7|1A|8|@]|D|@]|E|$]]]|S|$T|$5|U|V|W|E|$X|Y]]]]

<p>I needed to change an <code>input</code> to an arrow in my project. Below is final work.</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>#in_submit {
  background-color: white;
  border-left: #B4C8E9;
  border-top: #B4C8E9;
  border-right: 3px solid black;
  border-bottom: 3px solid black;
  width: 15px;
  height: 15px;
  transform: rotate(-45deg);
  margin-top: 4px;
  margin-left: 4px;
  position: absolute;
  cursor: pointer;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input id="in_submit" type="button" class="convert_btn"&gt;</code></pre>
</div>
</div>
</p>

<p>Here <a href="https://jsfiddle.net/mostafas/d1w6u717/2/" rel="nofollow">Fiddle</a></p>


blocks|key|42760|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|42761|.arrow+{
++display+:+inline-block;
++font-size:+10px;+/*+adjust+size+*/
++line-height:+1em;+/*+adjust+vertical+positioning+*/
++border:+3px+solid+#000000;
++border-left:+transparent;
++border-bottom:+transparent;
++width:+1em;+/*+use+font-size+to+change+overall+size+*/
++height:+1em;+/*+use+font-size+to+change+overall+size+*/
}

.arrow:before+{
++content:+"\00a0";+/*+needed+to+hook+line-height+to+"something"+*/
}

.arrow.left+{
++margin-left:+0.5em;
++-webkit-transform:+rotate(225deg);
++-moz-transform:+rotate(225deg);
++-o-transform:+rotate(225deg);
++-ms-transform:+rotate(225deg);
++transform:+rotate(225deg);
}

.arrow.right+{
++margin-right:+0.5em;
++-webkit-transform:+rotate(45deg);
++-moz-transform:+rotate(45deg);
++-o-transform:+rotate(45deg);
++-ms-transform:+rotate(45deg);
++transform:+rotate(45deg);
}

.arrow.top+{
++line-height:+0.5em;+/*+use+this+to+adjust+vertical+positioning+*/
++margin-left:+0.5em;
++margin-right:+0.5em;
++-webkit-transform:+rotate(-45deg);
++-moz-transform:+rotate(-45deg);
++-o-transform:+rotate(-45deg);
++-ms-transform:+rotate(-45deg);
++transform:+rotate(-45deg);
}

.arrow.bottom+{
++line-height:+2em;
++/*+use+this+to+adjust+vertical+positioning+*/
++margin-left:+0.5em;
++margin-right:+0.5em;
++-webkit-transform:+rotate(135deg);
++-moz-transform:+rotate(135deg);
++-o-transform:+rotate(135deg);
++-ms-transform:+rotate(135deg);
++transform:+rotate(135deg);
}|code-block|syntax|javascript|42762|<div>
++here+are+some+arrows
++<div+class='arrow+left'></div>+space
++<div+class='arrow+right'></div>+space
++<div+class='arrow+top'></div>+space
++<div+class='arrow+bottom'></div>+space+with+proper+spacing?
</div>|42763|42764|类似于Roko+C，但对大小和位置有更多的控制。|42765|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|O|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|I|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.arrow {
  display : inline-block;
  font-size: 10px; /* adjust size */
  line-height: 1em; /* adjust vertical positioning */
  border: 3px solid #000000;
  border-left: transparent;
  border-bottom: transparent;
  width: 1em; /* use font-size to change overall size */
  height: 1em; /* use font-size to change overall size */
}

.arrow:before {
  content: "\00a0"; /* needed to hook line-height to "something" */
}

.arrow.left {
  margin-left: 0.5em;
  -webkit-transform: rotate(225deg);
  -moz-transform: rotate(225deg);
  -o-transform: rotate(225deg);
  -ms-transform: rotate(225deg);
  transform: rotate(225deg);
}

.arrow.right {
  margin-right: 0.5em;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.arrow.top {
  line-height: 0.5em; /* use this to adjust vertical positioning */
  margin-left: 0.5em;
  margin-right: 0.5em;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.arrow.bottom {
  line-height: 2em;
  /* use this to adjust vertical positioning */
  margin-left: 0.5em;
  margin-right: 0.5em;
  -webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  -o-transform: rotate(135deg);
  -ms-transform: rotate(135deg);
  transform: rotate(135deg);
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;
  here are some arrows
  &lt;div class='arrow left'&gt;&lt;/div&gt; space
  &lt;div class='arrow right'&gt;&lt;/div&gt; space
  &lt;div class='arrow top'&gt;&lt;/div&gt; space
  &lt;div class='arrow bottom'&gt;&lt;/div&gt; space with proper spacing?
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>Similar to Roko C, but a little more control over size and placement.</p>


<p>Ok, so everyone knows you can make a triangle using this:</p>
<pre><code>#triangle {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid red;
}
</code></pre>
<p>And that produces a solid, filled in triangle. But how would you make a hollow-type arrow-like triangle, like this?</p>
<p><img src="https://i.stack.imgur.com/fMhGv.png" alt="an arrow with only two lines that intersect at the point. Like a greater than sign: &gt;" /></p>


How to Make A Chevron Arrow Using CSS?

好了，每个人都知道你可以用这个画一个三角形：#triangle {    width: 0;    height: 0;    border-left: 50px solid transparent;    border-right: 50px solid transparent;    border-bottom: 100px solid red;}这就产生了一个实心的，填充的三角形。但是你怎么

问如何使用CSS制作人字形箭头？
EN

回答 6

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用CSS制作人字形箭头？EN

回答 6

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用CSS制作人字形箭头？
EN