使用CSS的箭头

Question

我想使用css创建一个类似我附加的箭头。

我找到了以下article，但我无法删除只有一个尖端。

/* General Button Style */

.button {
  box-sizing: border-box;
  position: relative;
  display: inline-block;
  min-width: 200px;
  height: 80px;
  margin: 40px auto;
  color: #fd0;
  text-align: center;
  text-decoration: none;
  line-height: 80px;
}

.button:before,
.button:after {
  position: absolute;
  content: '';
  width: 100%;
  left: 0px;
  height: 34px;
  z-index: -1;
}

.button:before {
  transform: perspective(15px) rotateX(3deg);
}

.button:after {
  top: 40px;
  transform: perspective(15px) rotateX(-3deg);
}


/* Button Border Style */

.button.border:before,
.button.border:after {
  border: 4px solid #fd0;
}

.button.border:before {
  border-bottom: none;
  /* to prevent the border-line showing up in the middle of the shape */
}

.button.border:after {
  border-top: none;
  /* to prevent the border-line showing up in the middle of the shape */
}


/* Button hover styles */

.button.border:hover:before,
.button.border:hover:after {
  background: #fd0;
}

.button.border:hover {
  color: #fff;
}


/* Just for demo */

body {
  background: radial-gradient(circle, #3F9CBA 0%, #153346 100%);
  text-align: center;
}

<!-- Library included to avoid browser prefixes -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<a href="#" class="button ribbon-outset border">Click me!</a>

<br/>

Answer 1

使用transform-origin: left;仅在:before和:after

的一侧进行制作

＆＃13;

＆＃13;

/* General Button Style */

.button {
  box-sizing: border-box;
  position: relative;
  display: inline-block;
  min-width: 200px;
  height: 80px;
  margin: 40px auto;
  color: #fd0;
  text-align: center;
  text-decoration: none;
  line-height: 80px;
}

.button:before,
.button:after {
  position: absolute;
  content: '';
  width: 100%;
  left: 0px;
  height: 34px;
  z-index: -1;
}

.button:before {
  transform: perspective(15px) rotateX(3deg);
   transform-origin: left;
}

.button:after {
  top: 40px;
  transform: perspective(15px) rotateX(-3deg);
   transform-origin: left;
}


/* Button Border Style */

.button.border:before,
.button.border:after {
  border: 4px solid #fd0;
}

.button.border:before {
  border-bottom: none;
  /* to prevent the border-line showing up in the middle of the shape */
}

.button.border:after {
  border-top: none;
  /* to prevent the border-line showing up in the middle of the shape */
}


/* Button hover styles */

.button.border:hover:before,
.button.border:hover:after {
  background: #fd0;
}

.button.border:hover {
  color: #fff;
}


/* Just for demo */

body {
  background: radial-gradient(circle, #3F9CBA 0%, #153346 100%);
  text-align: center;
}

＆＃13;

<!-- Library included to avoid browser prefixes -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<a href="#" class="button ribbon-outset border">Click me!</a>

<br/>

＆＃13;

＆＃13;

＆＃13;

Answer 2

请看这里 - 您需要在前后元素中组合不同边框宽度的作品：

<div id="myarrow">My new arrow!</div>


 #myarrow {
   width: 200px;
   height: 50px;
   background: red;
   border: 1px solid blue;
   position: relative;
 }

 #myarrow:after {
   width: 0;
   height: 0;
   border: 25px solid transparent;
   border-left: 8px solid red;
   content: '';
   position: absolute;
   top: 0px;
   left: 200px;
 }

 #myarrow:before {
   width: 0;
   height: 0;
   border: 25px solid transparent;
   border-left: 8px solid blue;
   content: '';
   position: absolute;
   top: 0px;
   left: 201px;
 }

这是小提琴： https://jsfiddle.net/edL4ngt4/

Answer 3

链接到CodePen

public partial class UserDefinedFunctions
{

    [Microsoft.SqlServer.Server.SqlFunction]
    public static SqlBoolean SqlFunctValidateUserCred() 
    {
            bool verify = Crypto.VerifyHashedPassword("test", "test1");
            return verify;
    }
}

.button {
  position: relative;
  display: inline-block;
  width: 200px;
  height: 50px;
  border: 2px solid red;
  line-height: 50px;
  text-align: center;
  text-decoration: none;
  border-right: none;
}

.button::before {
  content: '';
  position: absolute;
  top: -3px;
  right: -9px;
  display: inline-block;
  width: 2px;
  height: 30px;
  background-color: red;
  transform: rotate(-30deg);
}

.button::after {
  content: '';
  position: absolute;
  bottom: -3px;
  right: -9px;
  display: inline-block;
  width: 2px;
  height: 30px;
  background-color: red;
  transform: rotate(30deg);
}

Answer 4

我已经改变了很多，我删除了:before并创建了一个由:after轮换的新45deg。这有一个边界。多数民众赞成。

＆＃13;

＆＃13;

/* General Button Style */

.button {
  box-sizing: border-box;
  position: relative;
  display: inline-block;
  min-width: 200px;
  height: 80px;
  margin: 40px auto;
  color: #fd0;
  text-align: center;
  text-decoration: none;
  line-height: 80px;
  border-top: 3px solid yellow;
  border-left: 3px solid yellow;
  border-bottom: 3px solid yellow;
}

.button::after {
  transform: rotate(-45deg);
  right: -28px;
  border-bottom: 3px solid yellow;
  border-right: 3px solid yellow;
  top: 9px;
  position: absolute;
  content: '';
  width: 53px;
  height: 53px;
  z-index: -1;
}


/* Button hover styles */

.button.border:hover:after {
  background-color: #fd0;
}

.button.border:hover {
  color: #fff;
  background-color: #fd0;
}


/* Just for demo */

body {
  background: radial-gradient(circle, #3F9CBA 0%, #153346 100%);
  text-align: center;
}

＆＃13;

<!-- Library included to avoid browser prefixes -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<a href="#" class="button ribbon-outset border">Click me!</a>

<br/>
<a href="#" class="button ribbon-outset border">I have a huge amount of text inside !!!!!!!!!!</a>

＆＃13;

＆＃13;

＆＃13;

Answer 5

用以下代码替换css中的以下类。

<style>
    .button:after {
        position: absolute;
        content:'';
        width: 100%;
        left: -5px;
        height: 34px;
        z-index: -1;
    }
     .button {
        box-sizing: border-box;
        position: relative;
        display: inline-block;
        min-width: 200px;
        height: 80px;
        margin: 40px auto;
        color: #fd0;
        text-align: center;
        text-decoration: none;
        line-height: 80px;
        border-left:4px solid red;
    }
    </style>