Question

好的，所以每当我尝试制作钻石时，钻石的边缘就会超出它的宽度，我不想用边距来修复它，我想要实际的宽度和高度来变化

这是我如何制作钻石形状..

<style> .toggler {cursor: pointer} </style>
<div>
<h1 class="toggler">Messaging</h1>
    <ul class="tree">
        <a href="#"><li>Link 1</li></a>
        <a href="#"><li>Link 2</li></a>
        <a href="#"><li>Link 3</li></a>
    </ul>
</div>
<div>
<h1 class="toggler">Information</h1>
    <ul class="tree">
        <a href="#"><li>Link 1</li></a>
        <a href="#"><li>Link 2</li></a>
        <a href="#"><li>Link 3</li></a>
    </ul>
</div>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script>
var clientStates = [];
$(document).ready(function () {
  $('h1.toggler').click(function (e) {
    $(this).parent().children('ul.tree').toggle(300);
    setTimeout(function() {saveLocalStorage();}, 350);  // wait until the animation is over, then save the state
  });
  loadLocalStorage();
});
function loadLocalStorage() {
  toggleState = JSON.parse(localStorage.getItem("toggleState"));
  if(typeof toggleState === 'object' ) {
    clientStates= toggleState;
  }
  for(var i in clientStates) {
    if(clientStates[i]) {
      $('h1.toggler').eq(i).parent().children('ul.tree').show();
    }
    else {
      $('h1.toggler').eq(i).parent().children('ul.tree').hide();
    }
  }
}
// read from the DOM if elements are visible or not.  Save to localStorage
function saveLocalStorage() {
  clientStates = [];
  $('h1.toggler').each(function() {
    if( $(this).parent().children('ul.tree').is(":visible") ) {
      clientStates.push(true);
    }
    else {
      clientStates.push(false);
    }
  });
  localStorage.setItem("toggleState", JSON.stringify(clientStates));
}
</script>

这是发生的事情： Image

我该如何解决这个问题？

Answer 1

如果你有一个65px宽/高的元素，当你旋转时，垂直/水平尺寸会根据...而变化，因为变换是完全视觉效果。

因此，如果您需要旋转的元素适合65px乘65px的空间，则必须缩小。

所讨论的比率是平方根2 = 1.1412

所以新尺寸将是原始值除以该数字。

＆＃13;

* {
  box-sizing: border-box;
}

.parent {
  width: 65px;
  height: 65px;
  margin: 3em auto;
  border: 1px solid green;
  position: relative;
}

.diamond {
  width: calc(100%/1.4142);
  height: calc(100%/1.4142);
  border: 3px solid #0E4991;
  position: absolute;
  ;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
}

＆＃13;

<div class="parent">
  <div class="diamond"></div>
</div>

＆＃13;

包裹宽度和高度的菱形形状

1 个答案: