Make the angle of box italic rounded using css only

问题: How to make the angle of box italic rounded similar the blue box in this image: can do that using CSS only? [no-canvas] body {background-color: #eee} #...

问题:

How to make the angle of box italic rounded similar the blue box in this image:

enter image description here

can do that using CSS only? [no-canvas]

body {background-color: #eee}

#name {
  width: 300px;
  height: 40px;
  font-size: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  /* - - - - - - - - - - - */
  border: 3px solid #3498db;
  border-radius: 0 8px 8px 0;
}
<div id="name">Something</div>


回答1:

You can use the css property transform: skew

I also added a span inside your div so that the text is not in italic.

body {background-color: #eee}

#name {
  width: 300px;
  height: 40px;
  font-size: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: skew(-30deg);
  /* - - - - - - - - - - - */
  border: 3px solid #3498db;
  border-radius: 0 8px 0 8px;
}
#name>span {
  transform: skew(30deg);
}
<div id="name"><span>Something</span></div>

If you want the left border to stay straight, you can try this :

body {background-color: #eee}

#container {
  border-left: 3px solid #3498db;
  overflow: hidden;
}

#name {
  width: 300px;
  height: 40px;
  font-size: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: skew(-30deg);
  /* - - - - - - - - - - - */
  border: 3px solid #3498db;
  border-radius: 0 8px 0 8px;
}
#name>span {
  transform: skew(30deg);
}
<div id="container">
  <div id="name" style="margin-left:-50px;"><span>Something</span></div>
</div>

  • 发表于 2019-12-25 16:15
  • 阅读 ( 87 )
  • 分类:网络文章

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除