代码之家 › 专栏 › 技术社区 › user3108268

使最后一个菜单项边框倾斜[重复]

css-transforms css3 css html javascript

user3108268 · 技术社区 · 8 年前

这个问题已经有了答案:

skew one side only of an element 2个答案
css-斜边不填充 3个答案

我有一个带有白色边框的简单菜单列表,默认情况下,所有边框必须是直的,最后一个边框必须倾斜。

ul{
背景色:183650;
}

李{
列表样式:无;
显示:内联块;
左边框:1px实心fff;
颜色:fff;
文本转换:大写;
填料:5px 10px;
字体大小:12px;
文本对齐:居中;
}
李:第一个孩子{
边界:无;
}
当前状态:



目标:



border is just simpleborder-left:1px solid fff;。


https://jsfiddle.net/u41wo2vc/3/

2个答案



CSS - Oblique border without filling

3个答案


   
    
     
      我有一个带有白色边框的简单菜单列表,默认情况下所有边框必须是直的,最后一个边框必须倾斜。
     
     ul {
  background-color: #183650;
}

li {
  list-style: none;
  display: inline-block;
  border-left: 1px solid #FFF;
  color: #FFF;
  text-transform: uppercase;
  padding: 5px 10px;
  font-size: 12px;
  text-align: center;
}
li:first-child {
  border: none;
}

     
      这是当前的:
     
     
      
       
      
     
     
     
     
      目标:
     
     
      
       
      
     
     
     
     
      边界很简单
      
       border-left: 1px solid #FFF;
      
      .
     
     
      
       https://jsfiddle.net/u41wo2vc/3/

2 回复 | 直到 8 年前

VXp Kadir BuÅ¡atliÄ 8 年前

skew() 信息技术:

ul {
  background-color: #183650;
}

li {
  list-style: none;
  display: inline-block;
  border-left: 1px solid #FFF;
  color: #FFF;
  text-transform: uppercase;
  padding: 5px 10px;
  font-size: 12px;
  text-align: center;
}

li:first-child {
  border: none;
}

li:last-child {
  transform: skew(-15deg);
}

li:last-child span {
  display: inline-block; /* or "block" */
  transform: skew(15deg);
}

<div class="menu">
  <ul>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li><span>Item</span></li>
  </ul>
</div>

包装歪斜

Chiller 8 年前

<li> 然后扭曲它

ul {
  background-color: #183650;
}

li {
  list-style: none;
  display: inline-block;
  border-left: 1px solid #FFF;
  color: #FFF;
  text-transform: uppercase;
  padding: 5px 10px;
  font-size: 12px;
  text-align: center;
}

li:first-child {
  border: none;
}

li:last-child {
  position: relative;
  border: none;
}

li:last-child::before {
  content: '';
  display: inline-block;
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 100%;
  background: #fff;
  transform: skew(-20deg);
}

<div class="menu">
  <ul>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
  </ul>
</div>

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

1 年前

Alex · 在轻量级中同时解构和不解构变量

1 年前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

1 年前

bairog · 从按属性筛选的对象数组字典中创建值数组

1 年前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

1 年前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

user3472810 · Angular@Output/EventEmitter返回undefined

1 年前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

1 年前