CSS实现三角形和平行四边形

客官°小女子只卖身不卖艺 2022-06-15 06:54 226阅读 0赞

首先展示效果图:
这里写图片描述
三角形实现(border):
当我们没有给元素设置宽高但却设置了border-width时:
这里写图片描述
从上面那张图片我们就可以了解三角形的形成原理了:

  1. div{ width: 0; height: 0; border-width: 50px; border-style: solid; border-color: transparent transparent #333 transparent; margin-bottom: 30px; }

平行四边形实现(transform):
只需要给元素添加 transform: skew( -30deg ) ;但是如果我们的DIV里面有内容的话就会发现内容也歪了,解决方法很简单,我们只要把内容嵌在一个单独的容器里面,再次进行transform: skew( 30deg ) 就可以了。

发表评论

表情:
评论列表 (有 0 条评论,226人围观)

还没有评论,来说两句吧...

相关阅读

    相关 CSS实现三角形

    实现三角形的原理就是不给标签元素设置高度,然后给标签只设置外边框,从而实现三角形,例如: <!DOCTYPE html> <html lang="en">

    相关 css实现三角形

    css可以实现各种各样的三角形,减少了切图加载图片,以下是各种三角形的实现方法。 1.首先设置一个盒子的三边为不同的颜色,看下边框是怎么显示的。 <html>

    相关 CSS实现三角形

    三角形是我们在开发中常用的,比如点击展开某个树状菜单,右边本来是向右的小箭头,然后变为向下,类似的 场景很多。 那么怎么简单的用css实现一个三角形呢? 话不多说,上代码: