Unwanted Outline on Border When Parent Is Transformed

Unwanted outline on border when parent is transformed

Add a translateZ(1px)

.container { 
    position:absolute; 
    top:50%; left:50%; 
    -webkit-transform:translateZ(1px) rotate(-45deg); 
    transform:rotate(-45deg); 
}

(not really sure why does this work ...)

fiddle

Seems that IE needs more fixing...

.container { 
    position:absolute; 
    top:50%; left:50%; 
    -webkit-transform:translateZ(1px) rotate(-45deg); 
    transform:perspective(999px) translateZ(1px) rotate(-45deg); 
}

fiddle2

CSS skew and transform adds unwanted outline on Chrome and Edge

Adjust the position of the :after element to have an overlap and avoid this. So intead of left:100% make it left:0 and adjust the z-index:

#nav {

  background-color: #183650;

  overflow: hidden;

}

ul {

  margin: 0 auto;

  width: 100%;

  display: flex;

  justify-content: center;

  align-content: center;

}

li {

  padding: 9px 0;

  list-style: none;

}

li.last,

li.first {

  background: none transparent;

  position: relative;

}

li.last::after {

  content: "";

  position: absolute;

  top: 0;

  left: 0; /*changed this */

  z-index:-1; /*Added this*/

  width: 100vw;

  height: 100%;

  background-color: #20bef2;

}

li a {

  border: none;

  color: #FFF;

  text-transform: uppercase;

  font-size: 17px;

  letter-spacing: 1px;

  padding: 0.75em 0.7em;

}

li.last {

  background-color: #20bef2;

  border-left: 3px solid #FFF;

}

li a {

  text-decoration: none;

}

li a:hover {

  background: none transparent;

}

li:last-child {

  background-color: #20bef2;

  transform: translateZ(1px) skew(-15deg);

  backface-visibility: hidden;

  -webkit-backface-visibility: hidden;

}

li:last-child a {

  transform: translateZ(1px) skew(15deg);

  backface-visibility: hidden;

  -webkit-backface-visibility: hidden;

}

<div id="nav">

  <ul>

    <li class="first"><a href="#">Item</a></li>

    <li><a href="#">Item</a></li>

    <li class="last"><a href="#">Item</a></li>

  </ul>

</div>

Why is there a border around modal box header?

You have some invalid / unnecessary properties set leaving it to interpretation by the browsers which could render different accordingly like for example border-radius would be 0 instead of with px, inset wouldn't apply to a fixed position element, and a hex color is only 6 digits (if you want an alpha channel for opacity go with rgba instead) etc.

Anyway, made some edits to your example, you should no longer see the issue, hope it helps. Cheers!

.header {
  background-color: #FFBF76;
  text-align: center;
  margin: -1px; /* ensure no resize space */
}
.modal {
  border: 3px solid #FFBF76;
  background: #FFF1BD;
}
.modalBackground {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #000066;
}

<div class="modalBackground">
  <div class="modal">
    <div class="header">
      My Header
    </div>
    <div>
    some content
    </div>
  </div>
</div>
<!-- <asd></asd> = not a valid element -->

CSS: Make last menu item border slanted

Just can just skew() it:

ul {

  background-color: #183650;

}

li {

  list-style: none;

  display: inline-block;

  border-left: 1px solid #FFF;

  color: #FFF;

  text-transform: uppercase;

  padding: 5px 10px;

  font-size: 12px;

  text-align: center;

}

li:first-child {

  border: none;

}

li:last-child {

  transform: skew(-15deg);

}

li:last-child span {

  display: inline-block; /* or "block" */

  transform: skew(15deg);

}

<div class="menu">

  <ul>

    <li>Item</li>

    <li>Item</li>

    <li>Item</li>

    <li>Item</li>

    <li>Item</li>

    <li><span>Item</span></li>

  </ul>

</div>

Unwanted lines in border-image where image parts connect

Found the problem. I had to add fill to property border-image-slice.

How to remove unwanted gap between the border and the element

I found a very simple answer to my own question. By simply adding the following line to the active state of the button:

.zoombtn:active{
    background:{background_of_button}
}

And that basically solves the problem because the white gap becomes a colored gap.

The gap is still there but just the same color as the button so it isn't noticeable at all.

Firefox adding an unwanted border on hover, active and focus states

I think this is not an issue. This might be browser based accessibility.

You can try:

selector::-moz-focus-inner {
  border: 0 !important;
}

selector:focus, selector:hover, selector:active {
   outline: 0 !important;
}

css transform:rotate property, unwanted border

try this one

HTML : -

<div id="wholeLogo">
  <h1 data-title="Logo"> <a href="#">Logo</a> </h1>
</div>

CSS : -

#wholeLogo {
    width: 600px;
    margin: 0 auto;
    margin-top: 35px;
    transform: rotate(7deg);
    -webkit-transform: rotate(7deg);
    -o-transform: rotate(7deg);
    -moz-transform: rotate(7deg);
}

h1 {
    position: relative;
    font-style: italic;
    font-family: Verdana;
    font-weight:normal;
    text-transform:uppercase;
    font-size:100px;
    text-shadow: 2px 3px 1px #292929;
}

h1 a {
    text-decoration: none;
    position: absolute;
    color: #0032ff;
    -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), color-stop(20%, rgba(0,0,0,0)), to(rgba(0,0,0,1)));
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    transition: all .3s;
}

h1 a:hover {
    color: #0032ff;
    -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), color-stop(50%, rgba(0,0,0,.3)), to(rgba(0,0,0,1)));
}

h1:after {
    color: #dc0000;
    content : attr(data-title);
}

---

Related Topics