css设置对话框的指向角

原创已于 2022-04-20 16:24:26 修改 · 233 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端 #css3 #html

于 2022-04-20 16:22:54 首次发布

CSS 专栏收录该内容

3 篇文章

订阅专栏

本文通过一个HTML和CSS的实例展示了如何利用`transform: rotate(90deg)`属性将一个方形角变为直角，从而创建一个角度转换的效果。示例中，一个圆形被放置在一个带有旋转角度的矩形内，展示了CSS3的强大功能。

直接写一个案例进行说明（可以有多种方式实现，暂时写一个）

展示哪个角通过transform: rotate(90deg);来实现

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  /* 根据 transform: rotate(90deg); 来设置渲染哪个角 */
  .angle {
    /* transform: rotate(90deg); */
    height: 250px;
    width: 250px;
    overflow: hidden;
    background-color: pink;
    background-color: aqua;
  }

  .circle {
    height: 500px;
    width: 500px;
    border-radius: 50%;
    background-color: #fff;
  }
</style>

<body>
  <div class="angle">
    <div class="circle">
    </div>
  </div>
</body>

</html>