CSS练习

weixin_54362826

已于 2022-03-31 11:31:23 修改

阅读量61

点赞数

分类专栏： css 文章标签： css

于 2021-05-23 12:08:38 首次发布

本文链接：https://blog.csdn.net/weixin_54362826/article/details/117192253

版权

2 篇文章 0 订阅

订阅专栏

这篇博客介绍了如何使用CSS来创建等腰三角形和直角三角形，并探讨了多种实现元素水平垂直居中的方法，包括absolute定位配合transform、flexbox布局以及table布局。示例代码详细展示了实现这些效果的具体步骤。

摘要由CSDN通过智能技术生成

   width: 0;
   border: 10px solid transparent;
   border-bottom-color: tomato;

   position: absolute;
   width: 0;
   border: 10px solid transparent;
   border-left-color: tomato;

   width: 0;
   border-top:20px solid transparent;
   border-right:20px solid coral;

	border-color: transparent coral transparent transparent;
    border-style: solid;
    border-width: 50px 25px 0 0;

.outer {
    position: relative
}
.inner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.outer {
    display: flex;
    justify-content: center;
    align-items: center;
}

.outer {
    display: flex;
}
.inner {
    margin: auto;
}

.inner {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

关注

专栏目录