Вопросы Теги

Я хочу сделать навигационную панель в html, которая похожа на браузерные (трапециевидные) [duplicate]

Уже есть много ответов, которые расскажут вам, как сделать правильную копию, но никто из них не говорит, почему ваша оригинальная «копия» не удалась.

Python не сохраняет значения в переменных; он связывает имена с объектами. Ваше исходное назначение взяло объект, на который ссылается my_list, и связал его с new_list. Независимо от того, какое имя вы используете, остается только один список, поэтому изменения, сделанные при обращении к нему как my_list, будут сохраняться при обращении к нему как new_list. Каждый из других ответов на этот вопрос дает вам различные способы создания нового объекта для привязки к new_list.

Каждый элемент списка действует как имя, поскольку каждый элемент связывается не исключительно с объектом. Неглубокая копия создает новый список, элементы которого привязываются к тем же объектам, что и раньше. 

new_list = list(my_list)  # or my_list[:], but I prefer this syntax
# is simply a shorter way of:
new_list = [element for element in my_list]

Чтобы сделать копию списка еще на один шаг, скопируйте каждый объект, на который ссылается ваш список, и привяжите эти копии элементов в новый список. 

import copy  
# each element must have __copy__ defined for this...
new_list = [copy.copy(element) for element in my_list]

Это еще не глубокая копия, потому что каждый элемент списка может ссылаться на другие объекты, точно так же, как список привязан к его элементам. Чтобы рекурсивно скопировать каждый элемент в списке, а затем каждый другой объект, на который ссылаются каждый элемент, и т. Д .: выполните глубокую копию. 

import copy
# each element must have __deepcopy__ defined for this...
new_list = copy.deepcopy(my_list)

Для получения дополнительной информации о копировании в окне [gg] см. документацию .

2
задан web-tiki 6 October 2014 в 09:20
поделиться

4 ответа

До тех пор, пока свойство CSS4 border-corner-shape не находится в опасности! и он не реализован . Это можно сделать с помощью преобразований CSS3 (чтобы сохранить свойство border использование):

HTML: 

<div class="box">
  Text Content
</div>

CSS: 

.box {
  width: 200px; 
  height: 35px;
  line-height: 35px;
  padding: 0 5px;
  background-color: #ccc;
  padding-right: 20px;
  border: solid 1px black;
  border-right: 0;  
  position: relative;
}

.box:after {
  content: "";
  display: block;
  background-color: #ccc;
  border: solid 1px black;
  border-left: 0;
  width: 35px;
  height: 35px;
  position: absolute;
  z-index: -1;
  top: -1px; /* pull it up because of 1px border */
  right: -17.5px; /* 35px / 2 */
  transform: skew(-45deg);
  -o-transform: skew(-45deg);
  -moz-transform: skew(-45deg);
  -webkit-transform: skew(-45deg);
}

Здесь JSBin Demo .

ПРИМЕЧАНИЕ. В приведенном выше примере div есть другой class атрибут box2, который реализован без использования объявлений CSS3, которые вы можете использовать для его использования;)

3
ответ дан Hashem Qolami 20 August 2018 в 23:12
поделиться

Скорее всего, это можно сделать, используя невидимый приграничный трюк. В сети есть некоторые «генераторы треугольников», например этот один

0
ответ дан Chris 20 August 2018 в 23:12
поделиться
  • 1
    +1 Это лучший вариант. Вы можете использовать дополнительный outline: solid 1px #000; для создания контура изображения. Даже вокруг треугольника. – Bart 25 May 2013 в 11:33

Вот решение .

CSS и HTML: 

    ul {
      position: relative;
      overflow: hidden;
      font: 14px Arial;
      margin: 0;
      padding: 0;
      list-style: none;
      text-align: center;
    }
    ul:before {
      content: "";
      position: absolute;
      z-index: -1;
      left: 124px;
      margin-left: -120px;
      width: 0;
      border-left: 0 solid transparent;
      border-right: 230px solid transparent;
      border-top: 179px solid #CCCCCC;
    }
    li {
      height: 3.8em;
      line-height: 3em;
      position: relative;
      margin-left: -562px;
    }
    li:after,
    li:before {
      content: "";
      display: block;
      height: 0.4em;
      background: #fff;
      width: 100%;
    }
<ul>
  <li>Text Content</li>
</ul>

Чтобы получить желаемый результат, вы должны использовать свойство border-width.

Надеюсь, это поможет.

0
ответ дан Nitesh 20 August 2018 в 23:12
поделиться

Если я опишу такой документ: 

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег DIV</title>
  <style type="text/css">
   .block1 { 
    width: 300px;
    height: 0px;
    border-style: solid;
    border-width: 200px 200px 0 0;
    border-color: #f200ff transparent transparent transparent;
   }
  </style> 
 </head>
 <body>
  <div class="block1">Text Content</div>
 </body>
</html>

Я получаю почти то, что вам нужно, но я не понимаю, почему текст отсутствует на рисунке?

0
ответ дан sribin 20 August 2018 в 23:12
поделиться