独特的按钮形状上的边框样式 [英] Border styles on unique button shape

问题描述

我正在尝试对齐伪元素的边框，以均匀地匹配按钮的边框.我使用::: before和:: after伪元素覆盖以获得这种效果，但它们与边框的其余部分不匹配.

我已经弄乱了每个元素的左右位置以及边框宽度，但是似乎无法使它们完美对齐

  * {-webkit-box-sizing:边框框;-moz-box-sizing:边框框；框大小:border-box；}.btn-txt {颜色:黑色;}按钮 {边界:无；大纲:无；填充:0;边界宽度:0;左:40％；}按钮:悬停{光标:指针；}.signpost {/*我们的矩形*/宽度:250像素；高度:50px;背景颜色:黄色；margin:0px自动;职位:相对边框顶部:2px稳定红色；边框底部:2px稳定红色；左边框:2px纯红色；}.signpost:之后{/*我们的伪元素*/内容:";/*必填*/位置:绝对；/*取消上限"操作*/最高:0％;/*将其粘贴到标志的顶部*/左:81％;/*将其推到右侧*/高度:0;/*我们在做边框时要记住*/宽度:0;border-width:25px;边框样式:实心；border-color:#fff;/*与矩形的bg相同*//*现在，我们使一些流浪汉消失*/border-top-color:透明;border-bottom-color:transparent;border-left-color:transparent;}.signpost:before {/*我们的伪元素*/内容:";/*必填*/位置:绝对；/*取消上限"操作*/最高:0％;/*将其粘贴到标志的顶部*/左:80％;/*将其推到右侧*/高度:0;/*我们在做边框时要记住*/宽度:0;border-width:25px;边框样式:实心；边框颜色:红色；/*与矩形的bg相同*//*现在，我们使一些流浪汉消失*/border-top-color:透明;border-bottom-color:transparent;border-left-color:transparent;}  

 < button class ="signpost">< p class ="btn-txt"> HELLO</p></button>  

当前问题的示例: https://codepen.io/codingforthefuture/pen/YzKeeVJ

解决方案

我认为我找到了合适的解决方案.从我最初的尝试中，我将伪元素制成完整的正方形并将其旋转45度，然后将它们重叠.我认为这也解决了放大和缩小时的问题.它还使标志的边缘指向而不是正方形，我认为这看起来更好.

 #flag4 {宽度:200像素；高度:56像素；框大小:内容框；padding-top:15像素；职位:相对背景:黄色；白颜色;font-size:11px;字母间距:0.2em；文本对齐:居中；文本转换:大写；边框顶部:1px纯红色；边框底部:1像素红色常亮；左边框:1px红色常亮；底边距:20px;}#flag4 ::之前，#flag4 ::之后{内容: "";位置:绝对；顶部:10px；宽度:0;高度:0；左:87.2％;右边框:26px实心#fff;border-top:26px实心#fff;border-bottom:25px实心#fff;左边框:25px实线#fff;变换:rotate(45deg);}#flag4 ::之前{右边框:26px纯红色；边框顶部:26像素纯红色；边框底:25px纯红色；左边框:25像素纯红色；左:86.6％;} 

codepen: https://codepen.io/codingforthefuture/pen/WNezNzZ

I am attempting to align the border of the pseudo-element to evenly match the border of the button. I am using ::before and ::after pseudo-elements overlaid to get this effect, but they do not properly match the rest of the border.

I have messed around with the left and right positioning as well as the border-width of each element, but can't seem to get them to line up perfectly

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.btn-txt{
  color: black;
}

button {
  border: none;
  outline: none;
  padding: 0;
  border-width: 0;
  left: 40%;
}

button:hover {
  cursor: pointer;
}

.signpost { /* our rectangle */
  width:250px;
  height:50px;
  background-color: yellow;
  margin:0px auto;
  position: relative;
  border-top: 2px solid red;
  border-bottom: 2px solid red;
  border-left: 2px solid red;
}

.signpost:after { /*  our pseudo-element */
  content:"";/* required */
  position: absolute; /* takes the 'cap' out off flow */
  top:0%; /* stick it to top edge of the sign */
  left:81%; /* push it way overto the right*/
  height:0; /* we're doing this with borders remember */
  width:0; 
  border-width: 25px;
  border-style:solid;
  border-color: #fff; /* same as bg of our rectangle */
  /* now we make some of theborders disappear*/
  border-top-color:transparent;
  border-bottom-color:transparent;
  border-left-color:transparent;
}

.signpost:before { /*  our pseudo-element */
  content:"";/* required */
  position: absolute; /* takes the 'cap' out off flow */
  top:0%; /* stick it to top edge of the sign */
  left:80%; /* push it way overto the right*/
  height:0; /* we're doing this with borders remember */
  width:0; 
  border-width: 25px;
  border-style:solid;
  border-color: red; /* same as bg of our rectangle */
  /* now we make some of theborders disappear*/
  border-top-color:transparent;
  border-bottom-color:transparent;
  border-left-color:transparent;
}

<button class="signpost">
  <p class="btn-txt">HELLO</p>
</button>

Example of current issue: https://codepen.io/codingforthefuture/pen/YzKeeVJ

解决方案

I think I came to a suitable solution. From my original attempt I made the pseudo elements complete squares and rotated them 45deg, then overlapped them. I think this resolves the issues when zooming in and out too. It also makes the edges of the flag pointed instead of squared off, which I think looks better.

#flag4 {
      width: 200px;
      height: 56px;
      box-sizing: content-box;
      padding-top: 15px;
      position: relative;
      background: yellow;
      color: white;
      font-size: 11px;
      letter-spacing: 0.2em;
      text-align: center;
      text-transform: uppercase;
      border-top: 1px solid red;
      border-bottom: 1px solid red;
      border-left: 1px solid red;
      margin-bottom: 20px;

    }

    #flag4::before,
    #flag4::after {
      content: "";
      position: absolute;
      top: 10px;
      width: 0;
      height: 0;
      left: 87.2%;
      border-right: 26px solid #fff;
      border-top: 26px solid #fff;
      border-bottom: 25px solid #fff;
      border-left: 25px solid #fff;
      transform: rotate(45deg);

    }

#flag4::before{
  border-right: 26px solid red;
  border-top: 26px solid red;
  border-bottom: 25px solid red;
  border-left: 25px solid red;
  left: 86.6%;
}

codepen: https://codepen.io/codingforthefuture/pen/WNezNzZ

这篇关于独特的按钮形状上的边框样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！